Solution au conflit entre onclick et mousedown dans l'événement jQuery-js tutoriel-php.cn

Solution au conflit entre onclick et mousedown dans l'événement jQuery

黄舟

Libérer： 2017-06-28 09:25:54

original

2420 Les gens l'ont consulté

Que dois-je faire si

onclick entre en conflit avec 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;;
                }
            });
 
        });

Copier après la connexion

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

Copier après la connexion

Je clique sur une image pour afficher

, je clique à d'autres endroits de la page sauf cette image
< ;div id="x-palette-panel">Masquer. . .

Mon problème est que lorsque je déclenche onclick sur

, ce qui est déclenché en premier est l'événement de clic de souris, qui provoque le masquage du div, de sorte que
onclick n'est pas déclenché. . . .

S'il vous plaît, demandez à Dieu de vous aider à résoudre ce problème. . . S'il vous plaît, donnez-moi le code ~~Merci

Le bouillonnement d'événements est interdit en highContrast

    $("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;  
     }  
 }

Copier après la connexion

Euh. . Pas très compréhensif. . ! Quels sont les paramètres d'événement de highContrast(event,0) ? ? ? Il y en a aussi lorsque la méthode fonction stopBubble(e,x) est appelée. . . .

Le bullage est interdit ? ? L'onclick peut-il être obtenu en désactivant le bouillonnement ?

Ce qui précède est faux, le code de test complet devrait être
Remarque : le clic doit être utilisé, pas le bouton de la souris

<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="http://avatar.profile.csdn.net/C/9/4/2_net_lover.jpg" id="color" />
  <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>

Copier après la connexion

$(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;;
                }
            });
 
        });

Copier après la connexion

Utiliser JQuery et JS en même temps Pourquoi pas juste un

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

jquery onclick

source：php.cn

Article précédent：jQuery : événements de conflit avec la souris et le clic Article suivant：jQuery résout le problème des conflits en cours entre les événements de souris mouseDown et doubleClick

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur