jquery 事件委托

点击事件是绑定在父元素身上的,然后父元素里面的span点击的时候回触发这个事件,但是点击父元素里面,span元素外面的地方也会触发这个事件图片描述

请输入代码
  <div class="field-en" @click="category($event)">
    <span class="btn-bg-active">RMSE</span>
    <span>R²</span>
  </div>
请输入代码
category(e){
  console.log(e)
  for(var i=0;i<$('.field-en').children().length;i++){
    $('.field-en').children()[i].className=''
  }
  e.target.className='btn-bg-active'
}
阅读 3.1k
3 个回答

你的事件绑定在field-en上,点击field-en上的任何一个位置当然都会触发事件,你可以使用事件委托把事件绑定在子元素span上

$('.field-en').on('click', 'span', category)

你这个跟jQuery没什么关系
如果你要用jQuery的事件委托

$( ".field-en" ).delegate( "span", "click", function() {
      //do sth
});

如果用vue的事件委托

 <div class="field-en" @click="category">
    <span class="btn-bg-active" title="click">RMSE</span>
    <span title="click">R²</span>
  </div>

    category(event){
        if(event.target.title == "click"){ 
           //do sth
        }
    }

看你的需求,是要让父元素里的所有span都能响应这个点击,但是不想父元素响应,这时候你应该通过e.target和e.currentTarget来判断点击的是父元素还是span。具体你的把这俩值打印出来就明白了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏