zoukankan      html  css  js  c++  java
  • 阻止点击事件

      有的时候我们实现功能时,会遇到种种问题需要阻止事件进行,比如 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>

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

  • 相关阅读:
    .net core 认证与授权(三)
    .net core 认证与授权(二)
    .net core 认证与授权(一)
    算法常识——快速排序
    ip 在网络传输中是如何传递的
    打开c++ 项目遇到的错误
    算法常识——鸡尾酒排序
    算法常识——冒泡排序
    算法常识——排序汇
    Tomcat 生产服务器性能优化
  • 原文地址:https://www.cnblogs.com/guofan/p/6830347.html
Copyright © 2011-2022 走看看