Question

我有两个ID one和two的分部，作为分区two内的分部one。现在，如果我在one内部two但在two之外点击，则要提醒我，如果我在<div id="one"> ONE ONE<br>ONE ONE<br> <div id="two"> TWO TWO<br>TWO TWO<br> </div> ONE ONE<br>ONE ONE<br> </div>内点击，则提醒TWO。

这是我尝试过的。

HTML：

$("div").click(function(event){
    var target = $(event.target);
    if(target.is("two")){
        alert("two");
    }else{
        alert("one");
    }
});

JS：

      var data1 = {};                            
      data1.code = $("#ddlList option:selected").text();   //Taking dropdown list value


           $.ajax({
                type: "POST",
                url: "Default.aspx/GetData",
                data: JSON.stringify(data1),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var data = JSON.stringify(data);
                    var data = $.parseJSON(data);

                    $.each(data, function (i) {
                        $("#Table").append("<tr><td>"  "</td></tr>");
                    });

提前感谢您的帮助。

Answer 1

如果你有嵌套的div，都有事件处理程序，但只想要一个事件，你需要使用

event.stopPropagation();

首先想到的是使用event.preventDefault()，但是：

preventDefault（）方法不会阻止事件通过DOM进一步传播。使用stopPropagation（）方法来处理这个问题。

ref

另外，.is函数将选择器作为参数，因此将是类选择器（.class）或id（#id）。

提供更新的代码：

$("div").click(function(event){
    var target = $(event.target);
    if(target.is("#two")){
        // don't bubble up to get two events
        event.stopPropagation();
        alert("two");
    }else{
        alert("one");
    }
});

工作小提琴：https://jsfiddle.net/phubzq68/

Answer 2

$("#one").click(function(event) {
  alert("one");
});
$("#two").click(function(event) {
  event.stopPropagation();
  alert("two");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
  ONE ONE
  <br>ONE ONE
  <br>
  <div id="two">
    TWO TWO
    <br>TWO TWO
    <br>
  </div>
  ONE ONE
  <br>ONE ONE
  <br>
</div>

单独点击
然后使用event.StopPropagation()以避免冒泡

Answer 3

$(document).ready(function(){
    $("div").click(function(){
        var id = $(this).attr('id');
        switch (id) { 
            case 'one': 
                alert('one');
                break;
            case 'two': 
                alert('two');
                break;
     });
});

注意：未经测试

使用jQuery查找两个部门之间的单击

3 个答案: