как мне обработать щелчок в любом месте страницы, даже когда определенный элемент останавливает распространение?

<p>события в современных реализациях dom имеют две фазы: <em>capturing</em> и <em>bubbling</em>. фаза захвата - это первая фаза, текущая от <code>defaultview</code> документа к цели события, за которой следует фаза пузырьков, которая течет от цели события обратно к <code>defaultview</code>. для получения дополнительной информации см. <a href="http://www.w3.org/tr/dom-level-3-events/#event-flow">http://www.w3.org/tr/dom-level-3-events/#event-flow</a> .</p><p>для обработки фазы захвата события вам нужно установить третий аргумент для <code>addeventlistener</code> в <code>true</code>:</p><pre><code>document.body.addeventlistener('click', fn, true); </code></pre><p>к сожалению, как отметил уэсли, этап захвата события не может быть надежно или вообще невозможен в старых браузерах.</p><p>одним из возможных решений является обработка события <code>mouseup</code>, поскольку порядок событий для кликов:</p><ol> <li>mousedown</li> <li>mouseup</li> <li>щелчок</li> </ol><p>если вы можете быть уверены, что у вас нет обработчиков, отменяющих событие <code>mouseup</code>, то это один из способов (и, возможно, лучший). следует также отметить, что многие, если не большинство (если не все), меню пользовательского интерфейса исчезают при нажатии мыши.</p>

<p>в сотрудничестве с <em>andy e</em> это темная сторона силы:</p><pre><code>var \_old = jquery.event.prototype.stoppropagation; jquery.event.prototype.stoppropagation = function() { this.target.nodename !== 'span' && \_old.apply( this, arguments ); }; </code></pre><p><strong>пример</strong>: <a href="http://jsfiddle.net/m4tea/2/">http://jsfiddle.net/m4tea/2/</a> </p><p>помните, что если все события были связаны с помощью jquery, вы можете обработать эти случаи только здесь. в этом примере мы просто вызываем исходную функцию <code>.stoppropagation()</code>, если мы не имеем дело с <code><span></code>.</p><hr><p>вы не можете предотвратить, нет.</p><p>что вы можете сделать, это переписать эти обработчики событий вручную в коде. это сложная задача, но если вы знаете, как получить доступ к хранимым методам обработчика, вы можете обойти это. я немного поиграл с этим, и вот мой результат:</p><pre><code>$( document.body ).click(function() { alert('hi i am bound to the body!'); }); $( '#bar' ).click(function(e) { alert('i am the span and i do prevent propagation'); e.stoppropagation(); }); $( '#yay' ).click(function() { $('span').each(function(i, elem) { var events = jquery.\_data(elem).events, oldhandler = [ ], $elem = $( elem ); if( 'click' in events ) { [].foreach.call( events.click, function( click ) { oldhandler.push( click.handler ); }); $elem.off( 'click' ); } if( oldhandler.length ) { oldhandler.foreach(function( handler ) { $elem.bind( 'click', (function( h ) { return function() { h.apply( this, [{stoppropagation: $.noop}] ); }; }( handler ))); }); } }); this.disabled = 1; return false; }); <strong>пример</strong>: <a href="http://jsfiddle.net/m4tea/">http://jsfiddle.net/m4tea/ обратите внимание, что приведенный выше код будет работать только с jquery 1.7. если эти события щелчка были связаны с более ранней версией jquery или «встроенным», вы все равно можете использовать код, но вам потребуется другой доступ к «старому обработчику».я знаю, что я предполагаю, что здесь много сценариев «идеального мира», например, что эти дескрипторы явно вызывают .stoppropagation() вместо возврата false. таким образом, это все еще может быть бесполезный академический пример, но я чувствовал, что должен его опубликовать :-)edit: эй, return false; будет работать нормально, к объектам событий обращаются аналогичным образом.

если вы убедитесь, что это обработчик событий first , что-то вроде этого может помочь:$('*').click(function(event) { if (this === event.target) { // only fire this handler on the original element alert('clicked'); } }); </code></pre><p>обратите внимание, что если на вашей странице много элементов, это будет действительно очень медленно и не будет работать для чего-либо, добавленного динамически.</p>

<p>вы можете использовать jquery для добавления прослушивателя событий в dom документа.</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> $(document).on("click", function () { console.log('clicked'); }); <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   

я думаю, что это то, что вам нужно:$("body").trigger("click"); </code></pre><p>это позволит вам вызвать событие щелчка мышью из любого места.</p>

<p><code>this</code> является ключом (против evt.target). смотрите пример.</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>document.body.addeventlistener("click", function (evt) { console.dir(this); //note evt.target can be a nested element, not the body element, resulting in misfires console.log(evt.target); alert("body clicked"); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><h4>this is a heading.</h4> <p>this is a paragraph.</p></code></pre> </div> </div> </p>