Question

场景：

功能一：

$(document).on('click','.select_lens_prescp_option',function(){  ....       });

功能二：

  $(document).on('click','.lens_manual_change',function(event){
    // event.preventDefault();
    $('#lens_edit_manual_change_'+
    $(this).data('suborder')+",#contacts_prescription_manual_change_"+
    $(this).data('suborder')+
    ",#lens_save_manual_change_"+$(this).data('suborder')).toggle('slow');
  });

现在我想在类lens_manual_change的点击事件中执行相同的功能，但是点击了select_lens_prescp_option类的事件

$(document).on('click','.select_lens_prescp_option',function(){
  ....
  if(form.find('.lens_form_fields').is(':hidden')){
      form.find('.lens_manual_change').trigger('click');   // this is the step I performed
    }
});

问题：第一个函数被触发两次。

Answer 1

内部事件处理程序内的

event.stopPropagation()函数将起作用。

$('.first').on('click', function(){
	alert(1);
});
$('.second').on('click', function(event){
	event.stopPropagation();
	alert(2);
});

.first{
  width:200px;
  height:200px;
  background-color:white;
}
.second{
  width:100px;
  height:100px;
  position: relative;
  margin: 0 auto;
  top:50px;
  background-color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class='first'>
  <div class='second'>
  </div>
</div>

documentation

JS函数只需单击一次即可触发两次

1 个答案: