zoukankan      html  css  js  c++  java
  • 点击div和某些控件之外的地方隐藏div,点击div不隐藏。对象 click和document click冲突有关问题

    帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学!

    问题背景:jQuery事件问题!!对象 click和document click冲突问题

    我想点击某个元素显示一个对象, 点击页面任意处,隐藏这个对象   


    //点击look对象,显示隐藏mydiv
     $("#look").bind("click", function () {
        
      $("#mydiv").toggle();
        
      })
    //点击任意地方,隐藏显示的mydiv

      $(document).bind("click", function () {
        
      if ($("#mydiv").css("display") == "block") {
      $("#mydiv").hide();
      }

      })

    这样两个事件冲突了,点击look对象,不会显示mydiv

    ------解决方案--------------------
    防止点击事件冒泡 return false; 
    ------解决方案--------------------
    不是冲突。。是冒泡了,,
    $("#look").bind("click", function (e) {
      
    $("#mydiv").toggle();
    e.stopPropagation
    })

    试试 
    ------解决方案--------------------

    JScript code
    $("#look").bind("click", function () {
        
      $("#mydiv").toggle();
        return false;
      })
    
    ------解决方案--------------------
    HTML code
    $(document).bind("click", function (e) {
        if ($(e.target).is('#test')) return;
        else{ 
            if ($("#mydiv").css("display") == "block") {
                 $("#mydiv").hide();
            }
        }
      })
    
    ------解决方案--------------------
    e.stopPropagation
    是这个
    ------解决方案--------------------
    探讨
    $(document).bind("click", function (e) {
    if ($(e.target).is('#test')) return;
    else{ 
    if ($("#mydiv").css("display") == "block") {
    $("#mydiv").hide();
    $(e.target).is('#test')主要是确定点击哪个目标,点击这个目标后不隐藏,点击其他就隐藏。
    为了保证点击这个div里面的控件不隐藏,可以设置$(e.target.parents()).is('#test')。保证点击某个div里面的东西也不隐藏。

    ……

    ------解决方案--------------------
    JScript code
    $("#look").bind("click", function () {  
      $("#mydiv").toggle();  
    event.stopPropagation();
      })
    
    ------解决方案--------------------
    探讨

    JScript code

    $("#look").bind("click", function (event) {
    $("#mydiv").toggle();
    event.stopPropagation();
    })

    ------解决方案--------------------
    return false就好了.

    JScript code
    <html>
    
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").click(function(){
      $(this).hide();
      });
    
    $("#look").bind("click", function () {
       
      $("#mydiv").toggle();
    return false;
       
      })
    //点击任意地方,隐藏显示的mydiv
    
      $(document).bind("click", function () {
       
      if ($("#mydiv").css("display") == "block") {
      $("#mydiv").hide();
      }
    
      })
    });
    </script>
    </head>
    
    <body>
    <div id='look'>
       click
    </div>
    <div id="mydiv">
    <p>If you click on me, I will disappear.</p>
    </div>
    </body>
    
    </html>
    
    ------解决方案--------------------
    JScript code
    $(function(){
    $("#look").click(function (e) {   
         $("#mydiv").show();
         return false;   
      });
    //点击任意地方,隐藏显示的mydiv
      $(document).click(function () {   
          $("#mydiv").hide();
      });
    });

    转自:http://blog.csdn.net/xudanna/article/details/51818992
  • 相关阅读:
    149. Max Points on a Line(js)
    148. Sort List(js)
    147. Insertion Sort List(js)
    146. LRU Cache(js)
    145. Binary Tree Postorder Traversal(js)
    144. Binary Tree Preorder Traversal(js)
    143. Reorder List(js)
    142. Linked List Cycle II(js)
    141. Linked List Cycle(js)
    140. Word Break II(js)
  • 原文地址:https://www.cnblogs.com/alsf/p/6475907.html
Copyright © 2011-2022 走看看