blocks|key|1742100|text|$(document).mouseup(function(event){

++++event.preventDefault();+//+this+prevents+only+a+default+action+but+previously+assigned+listeners+will+be+called
++++event.stopImmediatePropagation()+//+if+there+are++others+listeners+which+that+shouldn't+call+
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1742101|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).mouseup(function(event){

    event.preventDefault(); // this prevents only a default action but previously assigned listeners will be called
    event.stopImmediatePropagation() // if there are  others listeners which that shouldn't call 
}
</code></pre>


blocks|key|1955586|text|这可能是可能的，但我不确定你是否能用jQuery处理这种事件管理。This+code+example应该离你的期望不远，或者至少给你一个方向。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1955587|function+AddEvent(id,+evt_type,+ma_fonction,+phase)+{
++++var+oElt+=+document.getElementById(id);
++++//+modèle+W3C+mode+bubbling
++++if(+oElt.addEventListener+)+{
++++++++oElt.addEventListener(evt_type,+ma_fonction,+phase);
++++//+modèle+MSIE
++++}+else+if(+oElt.attachEvent+)+{
++++++++oElt.attachEvent('on'%2Bevt_type,+ma_fonction);
++++}
++++return+false;
}

function+DelEvent(id,+evt_type,+ma_fonction,+phase)+{
++++var+oElt+=+document.getElementById(id);
++++//+modèle+W3C+mode+bubbling
++++if(+oElt.removeEventListener+)+{
++++++++oElt.removeEventListener(evt_type,+ma_fonction,+phase);
++++//+modèle+MSIE
++++}+else+if(+oElt.detachEvent+)+{
++++++++oElt.detachEvent('on'%2Bevt_type,+ma_fonction);
++++}
++++return+false;
}

++++var+mon_id+=+'test';
++++var+le_type_evt+=+"mouseup";
++++var+flux_evt+=+false;+//+prevent+bubbling
++++var+action_du_gestionnaire+=+function(e)+{
++++++++alert('evt+mouseup+on+tag+<div>');

++++++++//+1ère+méthode+:+DOM+Lev+2
++++++++//+W3C
++++++++++++if+(+e.target+)
++++++++++++++++e.target.removeEventListener(le_type_evt,+arguments.callee,+flux_evt);
++++++++//+MSIE
++++++++++++else+if+(+e.srcElement+)
++++++++++++++++e.srcElement.detachEvent('on'%2Ble_type_evt,+arguments.callee);

++++++++//+2ème+méthode+DOM+Lev2
++++++++//+DelEvent(mon_id,+le_type_evt,+action_du_gestionnaire,+flux_evt);
++++};


++++AddEvent(mon_id,+le_type_evt,+action_du_gestionnaire,+flux_evt);|code-block|syntax|javascript|1955588|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tjXeh/5/^0|X|H|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>It might be possible but I'm not sure if you can handle this kind of evt management with jQuery. <a href="http://jsfiddle.net/tjXeh/5/" rel="nofollow">This code example</a> should not be far away from your expectation or at least give you a direction.</p>

<pre><code>function AddEvent(id, evt_type, ma_fonction, phase) {
    var oElt = document.getElementById(id);
    // modèle W3C mode bubbling
    if( oElt.addEventListener ) {
        oElt.addEventListener(evt_type, ma_fonction, phase);
    // modèle MSIE
    } else if( oElt.attachEvent ) {
        oElt.attachEvent('on'+evt_type, ma_fonction);
    }
    return false;
}

function DelEvent(id, evt_type, ma_fonction, phase) {
    var oElt = document.getElementById(id);
    // modèle W3C mode bubbling
    if( oElt.removeEventListener ) {
        oElt.removeEventListener(evt_type, ma_fonction, phase);
    // modèle MSIE
    } else if( oElt.detachEvent ) {
        oElt.detachEvent('on'+evt_type, ma_fonction);
    }
    return false;
}

    var mon_id = 'test';
    var le_type_evt = "mouseup";
    var flux_evt = false; // prevent bubbling
    var action_du_gestionnaire = function(e) {
        alert('evt mouseup on tag &lt;div&gt;');

        // 1ère méthode : DOM Lev 2
        // W3C
            if ( e.target )
                e.target.removeEventListener(le_type_evt, arguments.callee, flux_evt);
        // MSIE
            else if ( e.srcElement )
                e.srcElement.detachEvent('on'+le_type_evt, arguments.callee);

        // 2ème méthode DOM Lev2
        // DelEvent(mon_id, le_type_evt, action_du_gestionnaire, flux_evt);
    };


    AddEvent(mon_id, le_type_evt, action_du_gestionnaire, flux_evt);
</code></pre>


blocks|key|1742369|text|我也有同样的问题，也没有找到解决方案。但我想出了一个似乎可行的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1742370|由于onMouseUp处理程序似乎不能通过preventDefault或stopEvent或任何其他方式取消对链接的单击，因此我们需要使该链接取消自身。这可以通过编写onclick属性来完成，该属性在拖动开始时向a标记返回false，并在拖动结束时删除它。|1742371|由于onDragEnd或onMouseUp处理程序是在浏览器解释单击之前运行的，因此我们需要检查拖动的结束位置以及单击了哪个链接，等等。如果它在被拖动的链接之外结束(我们拖动了链接以便光标不再位于该链接上)，我们将删除onDragEnd中的onclick处理程序；但如果它在光标位于被拖动的链接上的位置结束(将启动单击)，我们将让onclick处理程序自行删除。够复杂的，对吧？|1742372|不是完整的代码，只是向你展示一下想法：|1742373|//+event+handler+that+runs+when+the+drag+is+initiated
function+onDragStart+(args)+{
++//+get+the+dragged+element
++//+do+some+checking+if+it's+a+link+etc
++//+store+it+in+global+var+or+smth

++//+write+the+onclick+handler+to+link+element
++linkElement.writeAttribute('onclick',+'removeClickHandler(this);+return+false;');
}

//+run+from+the+onclick+handler+in+the+a-tag+when+the+onMouseUp+occurs+on+the+link
function+removeClickHandler+(element)+{
++//+remove+click+handler+from+self
++element.writeAttribute('onclick',+null);
}

//+event+handler+that+runs+when+the+drag+ends
function+onDragEnds+(args)+{
++//+get+the+target+element

++//+check+that+it's+not+the+a-tag+which+we're+dragging,
++//+since+we+want+the+onclick+handler+to+take+care+of+that+case
++if+(targetElement+!==+linkElement)+{
++++//+remove+the+onclick+handler
++++linkElement.writeAttribute('onclick',+null);
++}
}|code-block|syntax|javascript|1742374|我希望这能让你对如何实现这一目标有所了解。正如我所说的，这不是一个完整的解决方案，只是解释了概念。|1742375|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I had the same problem and didn't found a solution either. But I came up with a hack that seems to work. </p>

<p>Since the onMouseUp handler doesn't seem to be able to cancel the click on a link with preventDefault or stopEvent or anything, we need to make the link cancel itself. This can be done by writing an onclick attribute which returns false to the a-tag when the drag begins, and removing it when the drag ends. </p>

<p>And since the onDragEnd or onMouseUp handlers are run before the click is interpreted by the browser, we need to do some checking where the drag ends and which link is clicked and so on. If it ends outside the dragged link (we dragged the link so that the cursor isn't on the link anymore), we remove the onclick handler in the onDragEnd; but if it ends where the cursor is on the dragged link (a click would be initiated), we let the onclick-handler remove itself. Complicated enough, right?</p>

<p>NOT COMPLETE CODE, but just to show you the idea:</p>

<pre><code>// event handler that runs when the drag is initiated
function onDragStart (args) {
  // get the dragged element
  // do some checking if it's a link etc
  // store it in global var or smth

  // write the onclick handler to link element
  linkElement.writeAttribute('onclick', 'removeClickHandler(this); return false;');
}

// run from the onclick handler in the a-tag when the onMouseUp occurs on the link
function removeClickHandler (element) {
  // remove click handler from self
  element.writeAttribute('onclick', null);
}

// event handler that runs when the drag ends
function onDragEnds (args) {
  // get the target element

  // check that it's not the a-tag which we're dragging,
  // since we want the onclick handler to take care of that case
  if (targetElement !== linkElement) {
    // remove the onclick handler
    linkElement.writeAttribute('onclick', null);
  }
}
</code></pre>

<p>I hope this gives you an idea of how this can be accomplished. As I said, this is not a complete solution, just explaining the concept. </p>


blocks|key|1955969|text|问题是有一个元素。它需要响应点击。它也需要被拖动。然而，当它被拖动时，它需要在被拖放时不触发点击。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1955970|有点晚了，但也许能帮到别人。创建一个名为"noclick“或其他名称的全局变量，并将其设置为false。拖动项目时，将noclick设置为true。在点击处理程序中，如果noclick为true，则将其设置为false，然后设置为preventDefault、return+false、stopPropagation等。只要让拖动功能只在浏览器不是Chrome时将noclick设置为true即可。|1955971|你的点击处理程序仍然会被解雇，但至少它有办法知道它刚刚从拖拽中回来，并做出相应的行为。|1955972|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>The problem is there's an element. It needs to respond to clicks. It also needs to be dragged. However, when it's dragged, it needs to not trigger click when it is dropped.</p>

<p>A little late, but maybe it'll help someone else. Make a global variable named "noclick" or something and set it to false. When dragging the item, set noclick to true. In your click handler, if noclick is true, set it to false and then preventDefault, return false, stopPropagation, etc. This won't work on Chrome though since Chrome already has the desired behavior. Just make it so that the drag function only sets noclick to true if the browser isn't Chrome.</p>

<p>Your click handler will still get fired, but at least it has a way to know that it just came back from drag and behave accordingly.</p>


blocks|key|1742755|text|因为它们是不同的事件，所以您不能从onmouseup中取消onclick，如果您调用preventDefault或cancelBubble或其他任何方法，您将停止进一步处理onmouseup事件。可以说，onclick事件仍处于挂起状态，尚未触发。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1742756|你需要的是你自己的布尔标志，例如isDragging。您可以在开始拖动时将其设置为true+(例如，在onmousedown中或其他任何地方)。|1742757|但是，如果您直接从onmouseup中将其重置为false，则在收到onclick事件(isDragging+==+false)时将不再拖动，因为onmouseup在onclick之前触发。|1742758|因此，您需要做的是使用较短的超时(例如setTimeout(function()+{isDragging+=+false;},+50);)，这样当您的onclick事件被激发时，isDragging仍将为true，并且您的onclick事件处理程序可以在执行任何其他操作之前简单地使用if(isDragging)+return+false;。|1742759|entityMap^0|H|9|T|7|16|E|1L|C|2E|9|2U|7|0|G|A|1F|B|0|9|9|Y|7|18|J|21|9|2B|7|0|J|1D|23|7|2H|A|2U|4|33|7|3Y|S|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|M|$]]

<p>As they are different events, you cannot cancel <code>onclick</code> from <code>onmouseup</code>, if you call <code>preventDefault</code> or <code>cancelBubble</code>, or whatever, you are stopping the <code>onmouseup</code> event from being processed any further.  The <code>onclick</code> event is still pending, yet to be fired, so to speak.</p>

<p>What you need is your own boolean flag, e.g. <code>isDragging</code>.  You can set this to true when dragging starts (e.g. within <code>onmousedown</code>, or whatever).  </p>

<p>But if you reset this to false directly from <code>onmouseup</code>, you will not be dragging any more when you receive your <code>onclick</code> event (<code>isDragging == false</code>), because <code>onmouseup</code> fires before <code>onclick</code> does.</p>

<p>So what you need to do is use a short timeout (e.g. <code>setTimeout(function() {isDragging = false;}, 50);</code>), so when your <code>onclick</code> event is fired, <code>isDragging</code> will still be <code>true</code>, and your <code>onclick</code> event handler can simply have <code>if(isDragging) return false;</code> before it does anything else.</p>


blocks|key|1742791|text|我最近也遇到了同样的问题。以下是我的解决方案:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1742792|++++initDrag:+function+(element)+{
++++++++var+moved+=+false,
++++++++++++target+=+null;

++++++++function+move(e)+{
++++++++++++//+your+move+code
++++++++++++moved+=+true;
++++++++};

++++++++function+end(e)+{
++++++++++++var+e+=+e+%7C%7C+window.event,
++++++++++++++++current_target+=+e.target+%7C%7C+e.srcElement;

++++++++++++document.onmousemove+=+null;
++++++++++++document.onmouseup+=+null;

++++++++++++//+click+happens+only+if+mousedown+and+mouseup+has+same+target
++++++++++++if+(moved+&&+target+===+current_target)+
++++++++++++++++element.onclick+=+click;

++++++++++++moved+=+false;
++++++++};

++++++++function+click(e)+{
++++++++++++var+e+=+e+%7C%7C+window.event;

++++++++++++e.preventDefault();
++++++++++++e.stopPropagation();

++++++++++++//+this+event+should+work+only+once
++++++++++++element.onclick+=+null;
++++++++};

++++++++function+init(e)+{
++++++++++++var+e+=+e+%7C%7C+window.event;
++++++++++++target+=+e.target+%7C%7C+e.srcElement;

++++++++++++e.preventDefault();

++++++++++++document.onmousemove+=+move;
++++++++++++document.onmouseup+=+end;
++++++++};

++++++++element.onmousedown+=+init;
++++};|code-block|syntax|javascript|1742793|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>i recently faced with the same problem. Here's my solution :)</p>

<pre><code>    initDrag: function (element) {
        var moved = false,
            target = null;

        function move(e) {
            // your move code
            moved = true;
        };

        function end(e) {
            var e = e || window.event,
                current_target = e.target || e.srcElement;

            document.onmousemove = null;
            document.onmouseup = null;

            // click happens only if mousedown and mouseup has same target
            if (moved &amp;&amp; target === current_target) 
                element.onclick = click;

            moved = false;
        };

        function click(e) {
            var e = e || window.event;

            e.preventDefault();
            e.stopPropagation();

            // this event should work only once
            element.onclick = null;
        };

        function init(e) {
            var e = e || window.event;
            target = e.target || e.srcElement;

            e.preventDefault();

            document.onmousemove = move;
            document.onmouseup = end;
        };

        element.onmousedown = init;
    };
</code></pre>


blocks|key|1956203|text|使用事件捕获阶段|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956204|在要取消单击事件的元素周围放置一个元素，并为其添加一个捕获事件处理程序。|1956205|​|1956206|var+btnElm+=+document.querySelector('button');

btnElm.addEventListener('mouseup',+function(e){
++++console.log('mouseup');
++++
++++window.addEventListener(
++++++++'click',
++++++++captureClick,
++++++++true+//+<--+This+registeres+this+listener+for+the+capture
+++++++++++++//+++++phase+instead+of+the+bubbling+phase!
++++);+
});

btnElm.addEventListener('click',+function(e){
++++console.log('click');
});

function+captureClick(e)+{
++++e.stopPropagation();+//+Stop+the+click+from+being+propagated.
++++console.log('click+captured');
++++window.removeEventListener('click',+captureClick,+true);+//+cleanup
}|code-block|syntax|javascript|1956207|<button>Test+capture+click+event</button>|1956208|1956209|JSFiddle+Demo|offset|length|1956210|会发生什么：|1956211|在触发button上的单击事件之前，将触发周围div上的单击事件，因为它将自身注册为捕获阶段，而不是冒泡阶段。|style|CODE|1956212|然后，captureClick处理程序停止其click事件的传播，并阻止调用按钮上的click处理程序。这正是你想要的。然后，它会删除自身以进行清理。|1956213|捕获与冒泡：|1956214|捕获阶段从DOM根到叶调用，而冒泡阶段从叶到根(参见：wonderful+explanation+of+event+order)。|1956215|jQuery总是将事件添加到冒泡阶段，这就是为什么我们需要在这里使用纯JS将捕获事件专门添加到捕获阶段。|1956216|请记住，IE使用IE9引入了W3C事件捕获模型，因此这不适用于IE+<+9。|1956217|1956218|使用当前事件API，您不能在已添加的DOM元素之前添加新的事件处理程序。没有优先级参数和there's+no+safe+cross-browser+solution+to+modify+the+list+of+event+listeners。|1956219|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/f9MGB/1/|1|http://www.quirksmode.org/js/events_order.html|2|https://stackoverflow.com/questions/9046741/get-event-listeners-attached-to-node-using-addeventlistener^0|0|0|0|0|0|0|0|D|0|0|0|3|6|N|3|0|3|C|M|5|16|5|0|0|R|10|1|0|0|0|0|18|24|2|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1P|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|1Q|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|1R|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1S|8|@]|9|@$P|1T|Q|1U|1|1V]]|A|$]]|$1|R|3|S|5|6|7|1W|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1X|8|@$P|1Y|Q|1Z|V|W]|$P|20|Q|21|V|W]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|22|8|@$P|23|Q|24|V|W]|$P|25|Q|26|V|W]|$P|27|Q|28|V|W]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|29|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|2A|8|@]|9|@$P|2B|Q|2C|1|2D]]|A|$]]|$1|13|3|14|5|6|7|2E|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2F|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2H|8|@]|9|@$P|2I|Q|2J|1|2K]]|A|$]]|$1|1A|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H]]|1I|$5|1D|1E|1F|A|$1G|1J]]|1K|$5|1D|1E|1F|A|$1G|1L]]]]

<h2>Use the event capture phase</h2>

<p>Put an element around the element you want to cancel the click event for, and add a capture event handler to it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var btnElm = document.querySelector('button');

btnElm.addEventListener('mouseup', function(e){
    console.log('mouseup');
    
    window.addEventListener(
        'click',
        captureClick,
        true // &lt;-- This registeres this listener for the capture
             //     phase instead of the bubbling phase!
    ); 
});

btnElm.addEventListener('click', function(e){
    console.log('click');
});

function captureClick(e) {
    e.stopPropagation(); // Stop the click from being propagated.
    console.log('click captured');
    window.removeEventListener('click', captureClick, true); // cleanup
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;Test capture click event&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/f9MGB/1/" rel="noreferrer">JSFiddle Demo</a></p>

<h2>What happens:</h2>

<p>Before the click event on the <code>button</code> is triggered the click event on the surrounding <code>div</code> gets fired because it registered itself for the capture phase instead of the bubbling phase.</p>

<p>The <code>captureClick</code> handler then stops the propagation of it's <code>click</code> event and prevents the <code>click</code> handler on the button to be called. Exactly what you wanted. It then removes itself for cleanup.</p>

<h2>Capturing vs. Bubbling:</h2>

<p>The capture phase is called from the DOM root up to the leafs while the bubbling phase is from the leafs up the root (see: <a href="http://www.quirksmode.org/js/events_order.html" rel="noreferrer">wonderful explanation of event order</a>).</p>

<p>jQuery always adds events to the bubbling phase that's why we need to use pure JS here to add our capture event specifically to the capture phase.</p>

<p>Keep in mind, that IE introduced the W3C's event capturing model with IE9 so this won't work with IE &lt; 9.</p>

<hr>

<p>With the current Event API you can't add a new event handler to a DOM Element before another one that was already added. There's no priority parameter and <a href="https://stackoverflow.com/questions/9046741/get-event-listeners-attached-to-node-using-addeventlistener">there's no safe cross-browser solution to modify the list of event listeners</a>.</p>


blocks|key|1956381|text|有一个解决方案！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956382|这种方法对我很有效(至少在chrome中是这样)：|1956383|在mousedown上，我向当前正在移动的元素添加一个类，而在mouseup上，我删除了这个类。|offset|length|style|CODE|1956384|该类所做的全部工作就是设置pointer-events:none|1956385|不知何故，这使它工作，点击事件不会被激发。|1956386|entityMap^0|0|0|1|9|V|7|0|D|J|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@$F|S|G|T|H|I]|$F|U|G|V|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|O|$]]

<p>There is a solution!</p>

<p>This approach works for me very well (at least in chrome):</p>

<p>on <code>mousedown</code> I add a class to the element that is currently being moved and on <code>mouseup</code> I remove the class.</p>

<p>All that class does is sets <code>pointer-events:none</code></p>

<p>Somehow this makes it work and click event is not fired.</p>


blocks|key|1956444|text|这是我对拖动并单击相同元素的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956445|$('selector').on('mousedown',function(){
++setTimeout(function(ele){ele.data('drag',true)},100,$(this));
}).on('mouseup',function(){
++setTimeout(function(ele){ele.data('drag',false)},100,$(this));
}).on('click',function(){
++if($(this).data('drag')){return;}
++//+put+your+code+here
});|code-block|syntax|javascript|1956446|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is my solution for drag and click on same element.</p>

<pre><code>$('selector').on('mousedown',function(){
  setTimeout(function(ele){ele.data('drag',true)},100,$(this));
}).on('mouseup',function(){
  setTimeout(function(ele){ele.data('drag',false)},100,$(this));
}).on('click',function(){
  if($(this).data('drag')){return;}
  // put your code here
});
</code></pre>


blocks|key|1956511|text|我使用的解决方案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1956512|var+disable_click+=+false;

function+click_function(event){
++++if+(!disable_click){
++++++++//+your+code
++++}
}

function+mouse_down_function(event){
++++disable_click+=+false;+//+will+enable+the+click+everytime+you+click
++++//+your+code
}

function+mouse_up_function(event){
++++//+your+code
}

function+mouse_drag_function(event){
++++disable_click+=+true;+//+this+will+disable+the+click+only+when+dragging+after+clicking
+++//+your+code
}|code-block|syntax|javascript|1956513|根据名称将每个函数附加到相应的事件！|1956514|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>the solution that i use is the following:</p>

<pre><code>var disable_click = false;

function click_function(event){
    if (!disable_click){
        // your code
    }
}

function mouse_down_function(event){
    disable_click = false; // will enable the click everytime you click
    // your code
}

function mouse_up_function(event){
    // your code
}

function mouse_drag_function(event){
    disable_click = true; // this will disable the click only when dragging after clicking
   // your code
}
</code></pre>

<p>attach each function to the appropriate event according to the name !</p>


blocks|key|1743214|text|对于我的情况，最好的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1743215|let+clickTime;

el.addEventListener('mousedown',+(event)+=>+{
++clickTime+=+new+Date();
});

el.addEventListener('click',+(event)+=>+{
++if+(new+Date()+-+clickTime+<+150)+{
++++//+click
++}+else+{
++++//+pause
++}
});|code-block|syntax|javascript|1743216|这给了用户150ms的释放时间，如果时间超过150ms，则被认为是暂停，而不是单击|1743217|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The best solution for my situation was:</p>

<pre><code>let clickTime;

el.addEventListener('mousedown', (event) =&gt; {
  clickTime = new Date();
});

el.addEventListener('click', (event) =&gt; {
  if (new Date() - clickTime &lt; 150) {
    // click
  } else {
    // pause
  }
});
</code></pre>

<p>This gives the user 150ms to release, if they take longer than 150ms it's considered a pause, rather than a click</p>


blocks|key|1743244|text|我的解决方案不需要全局变量或超时，也不需要更改html元素，只需要jquery，它在普通的js中肯定有一些等价物。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1743245|我为onClick声明了一个函数|1743246|function+onMouseClick(event){
+++++//+do+sth
}|code-block|syntax|javascript|1743247|我为MouseDown声明了一个函数(您也可以在鼠标打开时执行相同的操作)，以决定是否处理onclick事件|1743248|function+onMouseDown(event){
+++++//+some+code+to+decide+if+I+want+a+click+to+occur+after+mouseup+or+not
++++if(myDecision){
++++++++$('#domElement').on("click",+onMouseClick);
++++}
++++else+$('#domElement').off("click");
}+|1743249|快速注意:您应该确保|1743250|$('#domElement').on("click",+onMouseClick);不会多次执行。在我看来，如果是这样的话，onMouseClick也会被调用多次。|offset|length|style|CODE|1743251|entityMap^0|0|0|0|0|0|0|0|17|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>My solution doesn't require global variables or timeouts or changing html elements just jquery which surely has some aquivalent in plain js.</p>

<p>I declare a function for onClick</p>

<pre><code>function onMouseClick(event){
     // do sth
}
</code></pre>

<p>I declare a function for MouseDown (u may also do the same in mouse up) to decide if to handle an onclick event or not</p>

<pre><code>function onMouseDown(event){
     // some code to decide if I want a click to occur after mouseup or not
    if(myDecision){
        $('#domElement').on("click", onMouseClick);
    }
    else $('#domElement').off("click");
} 
</code></pre>

<p>Quick Note: you should make sure that<br>
 <code>$('#domElement').on("click", onMouseClick);</code> is not executed multiple times. Seems to me that in case it is the onMouseClick will be called multiple times too. </p>


blocks|key|1743263|text|选项#1：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1743264|可能最简单的解决方案是Event.stopImmediatePropagation()。虽然这附带了一个警告，即同一元素上的所有其他单击事件侦听器在被调用时将被取消，但在此特定情况下，它将起作用。|offset|length|style|CODE|1743265|<div+id="test">test</div>
<script>
$("#test").mouseup+(function+(e)+{
++var+a+=+1;
});

$("#test").click+(function+(e)+{
++//+You+should+add+a+check+here+to+only+stop
++//+if+the+element+was+actually+moved
++e.stopImmediatePropagation();
});

$("#test").click+(function+(e)+{
++var+a+=+2;
});|code-block|syntax|javascript|1743266|作为示例，请参阅以下代码：|1743267|https://codepen.io/guidobouman/pen/bGWeBmZ|1743268|选项#2：|1743269|如果您拥有另一个单击处理程序，如果事件默认操作被阻止，则另一个(更安全的)解决方案是签入单击处理程序(即您想要阻止的处理程序)。|1743270|<div+id="test">test</div>
<script>
$("#test").mouseup+(function+(e)+{
++var+a+=+1;
});

$("#test").click+(function+(e)+{
++//+You+should+add+a+check+here+to+only+prevent
++//+if+the+element+was+actually+moved
++e.preventDefault();
});

$("#test").click+(function+(e)+{
++if(e.defaultPrevented)+{
++++return;
++}

++var+a+=+2;
});|1743271|entityMap|0|LINK|mutability|MUTABLE|url^0|0|B|W|0|0|0|0|16|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|P]]]]

<h1>Option #1:</h1>
<p>Probably the easiest solution of all is <code>Event.stopImmediatePropagation()</code>. While this comes with the caveat that all other click event listeners on that same element will be canceled when called, in this specific case it would work.</p>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;test&quot;&gt;test&lt;/div&gt;
&lt;script&gt;
$(&quot;#test&quot;).mouseup (function (e) {
  var a = 1;
});

$(&quot;#test&quot;).click (function (e) {
  // You should add a check here to only stop
  // if the element was actually moved
  e.stopImmediatePropagation();
});

$(&quot;#test&quot;).click (function (e) {
  var a = 2;
});
</code></pre>
<p>As an example, see this codepen:<br />
<a href="https://codepen.io/guidobouman/pen/bGWeBmZ" rel="nofollow noreferrer">https://codepen.io/guidobouman/pen/bGWeBmZ</a></p>
<h1>Option #2:</h1>
<p>If you own the other click handler, an alternative (safer) solution would be to check in the click handler (the one you want to prevent) if the event default action was prevented.</p>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;test&quot;&gt;test&lt;/div&gt;
&lt;script&gt;
$(&quot;#test&quot;).mouseup (function (e) {
  var a = 1;
});

$(&quot;#test&quot;).click (function (e) {
  // You should add a check here to only prevent
  // if the element was actually moved
  e.preventDefault();
});

$(&quot;#test&quot;).click (function (e) {
  if(e.defaultPrevented) {
    return;
  }

  var a = 2;
});
</code></pre>


blocks|key|1743326|text|方法非常简单，只需向所有对象添加一个addEventListener并侦听“mousedown”和“mouseup”事件。如果你的'mousedown‘事件函数被调用，你会显示一个带有'style.position+=“absolute’的DIV窗口，它必须是透明的，并且获取整个窗口。并将Z顺序设置为类似于9999999。如果你在'MouseLeave‘处隐藏了DIV，那么Click可能会被抛出。因此，监听创建的DIV，并将其按下鼠标，并隐藏div，以确保这一点。则不会引发要取消的对象的“Click”事件。在“mouseup”中，你再次隐藏了你创建的div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1743327|本技巧仅用于使用WebView2对象编写应用程序，在这些应用程序中，您无法控制所显示的html网站，但需要向其注入javascript。另外，如果你能控制html源代码，只需在你用来取消或不取消的对象的mousedown中设置一个变量，然后在'click‘事件中，你只需查看该变量要做什么。|1743328|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>how you do it is pretty simple, you add a addEventListener to all objects and listen for the 'mousedown' and 'mouseup' events.
If your 'mousedown' event function is called you show a DIV window with 'style.position = &quot;absolute&quot;, must be transparent, and taking entire window. And set the Z-Order to something like 9999999. If you hide the DIV at a 'MouseLeave' the Click could raise. So listen for the created DIV its mousedown also and hide the div also just to be sure.
Then the 'Click' event of the object that you want to suppress will not raise.
In 'mouseup' you hide your created div again.</p>
<p>This tip is only used to write applications with the WebView2 object where you dont have control over the html website that you showing, but injecting javascript to it.
For all else, if you have control over the html source, just set a var in mousedown of object that you use to cancel or not, Then in 'click' event you simple look at the var what to do.</p>


<p>Writing some drag&amp;drop code, I'd like to cancel the click events in my mouseup handler. I figured preventing default should do the trick, but the click event is still fired.</p>

<p>Is there a way to do this?</p>

<hr>

<p>This doesn't work:</p>

<pre><code>&lt;div id="test"&gt;test&lt;/div&gt;
&lt;script&gt;
$("#test").mouseup (function (e) {
  var a = 1;
  e.preventDefault();
});
$("#test").click (function (e) {
  var a = 2;
});
</code></pre>


Cancel click event in the mouseup event handler

jQuery

在编写一些拖放代码时，我想取消鼠标向上处理程序中的单击事件。我认为防止默认应该能起到作用，但单击事件仍然被激发。有没有办法做到这一点？这不起作用：<div id="test">test</div><script>$("#test").mouseup (function (e) {  var a = 1;  e.prev...

问取消mouseup事件处理程序中的单击事件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问取消mouseup事件处理程序中的单击事件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问取消mouseup事件处理程序中的单击事件
EN