2

ボタンにクリックイベントを適用してdivを表示しました。また、ボディタグにonclickイベントを適用して、そのdivを非表示にしました。しかし、ボディにもあるボタンをクリックすると、ボタン呼び出しと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の回答によると、イベントがDOMツリーをバブリングするのを防ぐために使用する必要がありevent.stopPropagation()ます。

于 2012-07-24T09:44:38.667 に答える
1 
$(function(){
    $("body").click(function(){
        $("#divID").hide();
    });
    $("#btnShow").click(function(event){
        $("#divID").show();
        event.stopPropagation();
    });
})
于 2012-07-24T09:47:36.060 に答える
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;
}

JQuery:

$(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 に答える
0

以下のことを試すことができます-

$('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 に答える