解决div中嵌套元素时,二者点击事件同时触发


以Angualr为例:

<div class="previewImg" (click)="closeImg()">
    <img id="leftArrow" *ngIf="mid > left" (click)="leftImg($event)" src="../../../assets/community/leftArrow@3x.png"/>
    <img id="pre" src="{{imageUrl}}"/>
    <img id="rightArrow" *ngIf="mid < right" (click)="rightImg($event)" src="../../../assets/community/rightArrow@3x.png"/>
</div>

点击left或right时同时会触发外层的closeImg()事件,此时需阻止JS的冒泡事件。

    closeImg() {
        this.imageUrl = '';
    }
    leftImg(e) {
        alert('left!');
        e.stopPropagation();
    }
    rightImg(e) {
        alert('right!')
        e.stopPropagation();
    }
e.stopPropagation();调用该语句即可只触发内部的点击事件。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM