2

我在按钮上应用了点击事件并显示了一个 div。我还在 body 标签上应用了 onclick 事件来隐藏该 div。但是当我点击也在 body 中的按钮时，然后点击按钮调用和 div 显示的点击功能。同时，body 调用的 onclick 事件和 div 隐藏。

我想在单击按钮时显示 div 并在单击任何其他位置时将其隐藏。

任何人都可以帮助我提前谢谢

4

7 回答 7

3

使用event.stopPropagation()防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

jQuery 

$('button').click(function(){
    alert('show');
    $('div').show();
    event.stopPropagation(); // <<<<<<<<
});

$('body').click(function(){
    $('div').hide();
    alert('hide');
})

见演示：http: //jsfiddle.net/MX4xA/

​</p>

于 2012-07-24T09:51:19.003 回答
2

只是一个简单的例子。未经测试。除非您提供更多信息，否则无法提供更多信息。

HTML：

<body>
   <div id="element">Show / hide this</div>
   <div id="button">Click me!</div>
</body>

JS：

$(document).ready(function() {
    // Click event on body hide the element
    $("body").click(function() {
        $("#element").hide("fast");
    });

    // Click event on button show the element
    $("#button").click(function() {
        $("#element").show("fast");
        event.stopPropagation();
    });
}

根据artwl的回答，您将希望使用它event.stopPropagation()来防止事件冒泡 DOM 树。

于 2012-07-24T09:44:38.667 回答
1

在这里，我已经为上述问题完成了完整的垃圾箱。

演示： http ://codebins.com/bin/4ldqp9s

每当您使用语句 event.stopPropagation(); 在 jquery 函数中，您必须将事件变量定义为函数参数，然后它将被视为事件对象变量并且它工作正常。

HTML：

<div id="panel">
  <div id="box">
    Div To be Hide/Show
  </div>
  <br/>
  <input type="button" id="btn1" name="btn1" value="Show Div"/>
</div>

CSS：

#box{
  height:50px;
  width:200px;
  background:#55a1dc;
  vertical-align:middle;
  text-align:center;
  border:1px solid #334499;
  display:none;
}

查询：

$(document).ready(function() {
    // Click event on body hide the element
    $("body").click(function(event) {
        $("#box").hide(600);
        event.stopPropagation();
    });

    // Click event on button show the element
    $("#btn1").click(function(event) {
        $("#box").show(600);
        event.stopPropagation();
    });
});

演示： http ://codebins.com/bin/4ldqp9s

于 2012-07-24T10:25:31.817 回答
1 
$(function(){
    $("body").click(function(){
        $("#divID").hide();
    });
    $("#btnShow").click(function(event){
        $("#divID").show();
        event.stopPropagation();
    });
})
于 2012-07-24T09:47:36.060 回答
0

You can try something below - 

$('body.aClass').click(function(){
    $('#divId').hide(); 
    $(this).removeClass('aClass'); 
});
$('button').click(function(){ 
    $('#divId').show(); 
    $('body').addClass('aClass'); 
});
于 2012-07-24T09:47:19.640 回答
0 
<script>
$(document).ready(function(){
 $("body").click(function(){
        $("#effect").hide();
    });

  $("#button").click(function(){
    $("#effect").toggle();
    event.stopPropagation();
  });



   $( "#effect" ).hide();
});
</script>
于 2013-05-11T08:34:37.157 回答
0

点击body做一些除了特定div之外的事情

$(document).on('click', function (event) {
  // ... clicked on the 'body', but not inside of #menu
});
$('#menu').on('click', function (event) {
  event.stopPropagation();
});
于 2021-06-03T03:03:42.133 回答