Solution to the conflict between onclick and mousedown in jQuery event-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Solution to the conflict between onclick and mousedown in jQuery event

黄舟

Jun 28, 2017 am 09:25 AM

jqueryonclick

What should I do if

onclick conflicts with mousedown? ? ?

$(function() {
            $(document).mousedown(function(event) {
                if (event.target.id == &#39;color&#39;) {
                    document.getElementById("x-palette-panel").style.display = &#39;block&#39;;
                }
                else {
                    document.getElementById("x-palette-panel").style.display = &#39;none&#39;;
                }
            });
 
        });

<div id="x-palette-panel" class="panel" style="left: 500px; display: none;">
   <span style="color:#000000;background-color:#ffffff;" onclick="highContrast(0)">黑底白字</span>
</div>

I click on a picture to display

, and click on other places on the page except this picture

Hide. . .

My problem is that when I trigger onclick in

, what is triggered first is the mouse click event, which causes the div to be hidden, so that
onclick is not triggered. Methods. . . .

Please ask God to help solve this problem. . . Please give me the code~~Thank you

highContrast prohibits event bubbling

    $("span").click(function(event){  
        event.stopPropagation(); // do something  
    })  


or
   <span style="color:#000000;background-color:#ffffff;" onclick="highContrast(event,0)">黑底白字</span>

function stopBubble(e,x) {  
//你的执行代码
     if (e && e.stopPropagation) {//非IE  
         e.stopPropagation();  
     }  
     else {//IE  
         window.event.cancelBubble = true;  
     }  
 }

um. . Not very understanding. . ! What are the event parameters of highContrast(event,0)? ? ? There is also when the function stopBubble(e,x) method is called. . . .

Bubbling is prohibited? ? Can onclick be implemented by disabling bubbling?

The above is wrong, the complete test code should be
Note: click should be used instead of mousedown

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>无标题页</title>
  <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="x-palette-panel" class="panel" style="left: 500px; display: none;">
    <span style="color: #000000; background-color: #ffffff;" onclick="highContrast(event,0)">
      黑底白字</span>
  </div>
  <img  src="/static/imghwm/default1.png"  data-src="http://avatar.profile.csdn.net/C/9/4/2_net_lover.jpg"  class="lazy"   id="color" / alt="Solution to the conflict between onclick and mousedown in jQuery event" >
  <div>其他地方的内容</div>
  </form>
  <script type="text/javascript">
    $(function () {
      $(document).click(function (event) {
        if (event.target.id == &#39;color&#39;) {
          document.getElementById("x-palette-panel").style.display = &#39;block&#39;;
        }
        else {
          document.getElementById("x-palette-panel").style.display = &#39;none&#39;;
        }
      });
    });
    function highContrast(e, x) {
      alert("你点击了 黑底白字 参数=" + x);
      if (e && e.stopPropagation) {//非IE  
        e.stopPropagation();
      }
      else {//IE  
        window.event.cancelBubble = true;
      }   
    }
  </script>
</body>
</html>

$(function() {
            $(document).mousedown(function(event) {
                if (event.target.id == &#39;color&#39;) {
                    document.getElementById("x-palette-panel").style.display = &#39;block&#39;;
                }
                else if(event.target.id!=&#39;x-palette-panel&#39;){ //再做一层判断
                    document.getElementById("x-palette-panel").style.display = &#39;none&#39;;
                }
            });
 
        });

Use JQuery and JS at the same time Why not use one

The above is the detailed content of Solution to the conflict between onclick and mousedown in jQuery event. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn