有一个需求是这样的:

父元素div绑定一个mousedown事件,子元素a绑定一个click事件。

看解构:

<div >
        <a href="javascript:void(0);">点我</a>
    </div>

 

搜了很多相关的都没有解决办法,于是我想到了事件委托,在父元素被mousedown的时候,event对象里包含了很多有用的东西。其中target就是关键!

代码:

//原生js走起
const nav = document.querySelector('#nav');
    const a = nav.querySelector('a');
    a.addEventListener("click",function(e){
        alert("a被点了");
        //e.stopPropagation();
    });
    nav.addEventListener("mousedown",function(e){
        (e.target.tagName).toLowerCase() === 'a' ? a.click :alert('你点击的是父元素');        
    });

  

这样,只要判断到我们点击到区域有a标签,说明我点击到了它,然后模拟触发一次click,就完成了我的需求了。

相关文章:

  • 2022-12-23
  • 2021-08-10
  • 2021-12-01
  • 2021-08-11
  • 2021-09-09
猜你喜欢
  • 2021-11-30
  • 2022-01-01
  • 2021-07-31
相关资源
相似解决方案