阻止点击事件

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

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

时间: 2024-11-15 01:01:11

阻止点击事件的相关文章

双击事件阻止点击事件

//定义setTimeout执行方法 var TimeFn = null; $DIV.on('click', function(){ // 取消上次延时未执行的方法 clearTimeout(TimeFn); TimeFn = setTimeout(function() { ...单击事件 },300); }); $DIV.on('dblclick', function(){ clearTimeout(TimeFn); ...双击事件 });

JS中点击事件冒泡解析

关于Javascript中的点击事件冒泡的问题,很多初学者都处理不好. 什么是点击事件冒泡? 例: 今天我去小明家找他玩.正好小明.小明的爸爸.小明的爷爷在客厅一起看电视. 我对小明说:”咱们出去玩吧“. 小明十分乐意的回答到:”好啊“. 小明的爸爸听到后,说到:”把作业写完后在出去玩“. 小明的爷爷也发话了:”预报有雷阵雨,就别出去玩了“. 我本来只是询问一下小明的意见,结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为. 这次之后,我和小明私下约定好.以后去找他玩的,都会去他房间里

阻止click点击事件

遇到一个屏蔽点击事件,以前一般都是通过js控制,阻止事件,今天看到css加一个样式就能屏蔽,来记录一下 //css禁用鼠标点击事件 .test { pointer-events: none; } 随便其他方法也记下吧 1. e.stopPropatation||e.cancelBubble = true jquery禁用a标签 方法1: $(document).ready(function() { $("a").each(function() { var textValue = $(t

jquery 点击tr选中checkbox,解决checkbox的默认点击事件被阻止的问题

  1.第一种,!$(event.target).is('input'),判断触发事件的元素是否为input.此时使用event.target,而不是this,获取事件本身,防止触发事件冒泡的问题. $("#data_table tr").on("click",function (event) { if (!$(event.target).is('input')) { $('input:checkbox', this).prop('checked', functio

点击事件阻止缺省事件以及阻止冒泡

1 function stopEvent(e){ 2 stopDefault(e); 3 stopBubble(e); 4 } 5 //阻止缺省事件发生 6 function stopDefault(e){ 7 if(e.preventDefault){ 8 e.preventDefault(); 9 }else{ 10 e.returnValue=false; 11 } 12 } 13 //阻止冒泡发生 14 function stopBubble(e){ 15 if(e.stopPropag

jQuery中怎样阻止后绑定事件

你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if($("#tx").val()==""){alert("e1");}else{//删除后绑定的事件...$("#btn").unbind('click');}}); 说明:unbind([type],[data])bind()的反向

解决label点击事件触发两次问题

问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name="sex" />男 </label> <label> <input type="radio" name="sex" />女 </label> 但是,此时,如果label标签有点击事件,则会触发两次.

点击事件里面的change事件,多次触发change事件

最近做个项目,在点击按钮后弹出一个层,里面有单选按钮,选中单选按钮时就可以动态添加到对应的地方了 $(".xinz").click(function(event){ event.stopPropagation(); radioBoxChange += 1; //clickChange = "shspClick"; var radioBox=$("#radioBox"); var hsBox=$(this).siblings(".deli

理解阻止浏览器默认事件和事件冒泡cancelBubble

一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先天,默认好的了. 2.看个demo,阻止浏览器默认的右键弹出菜单,而且弹出自己自定义的菜单.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type=&