解决子元素click对父元素mousedown的影响 |
您所在的位置:网站首页 › 有声小说在线收听连播 › 解决子元素click对父元素mousedown的影响 |
如题,在最子元素绑定click事件,父元素绑定mousedown事件。 由于事件冒泡的影响,当子元素触发click的时候,其父元素的mousedown也会被触发。 var big_ele = document.querySelector(".big-box"); var small_ele = document.querySelector(".small-box"); big_ele.onmousedown = function(){ alert("这是大盒子"); } small_ele.onclick = function(){ alert("这是小盒子"); }如上图点击绿色小盒子时,会触发大盒子的mousedown事件。 解决方法很简单,但是会有点麻烦,就是保持父元素事件不变,将子元素的click事件换成mousedown和mouseup事件。 mousedown中的回调函数里阻止事件冒泡mouseup中的回调函数里放原本click要执行的代码。 small_ele.onmousedown = function(ev){ var e = ev || event; if(typeof e.stopPropagation === "function" ){ e.stopPropagation(); }else{ e.cancelBubble = true; } } small_ele.onmouseup = function(){ alert("这是小盒子"); }这样子元素的点击事件就能如愿响应了。 如果大家有更好跟方便的解决办法,欢迎留言讨论! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |