阻止点击事件

Posted 名字不好起啊

tags:

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

  有的时候我们实现功能时,会遇到种种问题需要阻止事件进行,比如 ul 与 li 同时绑定了个方法,但是点击后功能并不一样,这时候我们如果只点击 ul 还好,只会触发 ul 的方法,但如果点击 ul 下的 li 的话,li 方法触发后,会进行冒泡,而后触发 ul 方法,这并不是我们想要的~

  那我们有三种方式来阻止事件进行:

  1、最简单的,在 function 中,直接进行 return false; 它会取消默认行为并阻止事件冒泡。很强大,只要用了这个啥事件都不会出发了。。。

<button onclick="clickLi(event, this)" id=‘1‘>click </button>
<script>
    function clickLi(event, ele) {
        return false;
    }
</script>

  2、使用 event.preventDefault(); 取消默认行为。不会阻止冒泡。这个默认行为指的是浏览器的默认行为。

  (示例代码 building 中 ...)

 

  3、还可以使用 event.stopPropagation(); 这个是会阻止冒泡的。

<ul onclick=‘clickC(event, this)‘>
    <li onclick="clickC(event, this)" id=‘1‘>1 click </li>
    <li onclick="clickC(event, this)" id=‘2‘>2 click </li>
</ul>
<script>
    function clickC(event, ele) {
        event.stopPropagation();
        console.log(get :, ele);
    }
</script>

 

  应用场合还是有很多的,我就不再举例子啦。

以上是关于阻止点击事件的主要内容,如果未能解决你的问题,请参考以下文章

阻止实时点击事件,直到该功能没有结束?

js阻止浏览器元素的默认事件与js阻止事件冒泡阻止事件流

embed标签 阻止点击事件 让父元素处理点击事件

阻止事件冒泡和阻止后续代码执行

vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件

阻止锚点父元素点击事件