子元素不继承父元素中的点击事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了子元素不继承父元素中的点击事件相关的知识,希望对你有一定的参考价值。

参考技术A 如下图一行表格中有两个点击事件:

1. 点击某一行时,需要跳转页面跳转;

2. 点击删除按钮时,删除该行;

当我点击删除按钮后,不仅触发了自己的点击事件,也跳转了页面。

原因:这是由于子元素继承了父元素身上的方法。

后续补充:

在vue中我们可以直接给点击事件一个stop修饰符就可以解决:

eg:@click .stop ="hlandClick()"

H5_0038:父元素有touch事件,子元素有点击事件,如何实现点击事件

移动端父元素绑定touch事件,子元素绑定click事件

一、问题描述

碰到一个非常头疼的问题,为了做一个滑动效果,给li标签绑定了touch事件。滑动之后,li标签的末尾会出现一个删除按钮,然后点击该删除按钮,删除整个li标签。

看起来没什么问题吧,实际上暗藏杀机啊。给删除按钮绑定点击事件的时候,并没有执行点击事件,而是先执行了父元素,也就是li标签的touch事件。

那怎么解决呢?

最开始想到的是,click事件应该设置成冒泡阶段执行,在设置个阻止冒泡,这样不就不会触发父元素的touch事件了。貌似很有道理。试了试,然并卵。

再分析,点击的时候,首先执行的就是touch事件,并不是冒泡阶段才执行的。也就是说我在点击删除按钮的时候必须把父元素的touch事件给禁止掉。

怎么解决?

二、解决方法

(1)方案一:

最简单的方法,把删除按钮写在li标签的外面。这样li标签就不是删除按钮的父元素了。点击删除按钮的时候就不会触发li标签的touch事件了。

这个方案跟本文的主题不是很符合对不对,没有解决核心问题。好,还有方案二。

(2)方案二:

在父元素的touch事件中进行判断,如果触发父元素的事件源是删除按钮的时候,父元素的touch事件就不执行。

思路有了,怎么写代码呢。

e.target有没有想到,通过判断这个就可以实现上面的思路了。

代码如下:

    elements[0].addEventListener(‘touchstart‘, cancel);

    function cancel(evt) {
        // console.log(evt.target.classList[0]);
        if (!evt.target.classList.contains("draggable")) {
            // console.log(‘3d‘);
            return;
        }

    }

 

 

以上是关于子元素不继承父元素中的点击事件的主要内容,如果未能解决你的问题,请参考以下文章

js在父元素上添加点击事件,怎么阻止子元素继承父元素的点击事件?

怎么做到点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件?

jq 在iframe中点击按钮,父元素触发事件

Angular4 /子元素不触发父(点击)事件

jquery怎么在父元素事件中禁止子元素的事件?

H5_0038:父元素有touch事件,子元素有点击事件,如何实现点击事件