解决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();调用该语句即可只触发内部的点击事件。
posted @ 2018-12-06 10:44  乐观的阿珍  阅读(1703)  评论(0编辑  收藏  举报