admin管理员组

文章数量:1417550

How can I cancel all click events in a HTML document?

I have a Webapp where a situation can occur where the user needs to accept a message before to go on. The idea is that the message appears and when the user clicks somewhere else the message blinks or tries to catch the user's attention

This app is intended to be used by administrations using IE 8 and up + modern browsers, that's why I was hoping for a jquery solution.

At the moment, I tried:

failed solution 1

$(document).bind('click', function(event){
            event.stopImmediatePropagation();
            $('.alertbox').effect('shake');
            return false;
        });

hoping the return false or the event stop propagation would stop the click, But I found out the event bubbles up from the Dom element to the document, so the dom element fires the click anyway.

failed solution 2

I found a solution in pure JS:

document.addEventListener('click', function(e) {
    e.stopPropagation();
}, true);

using true as a third argument will bind the listener to the capture phase and execute the function before anything else gets executed, but this doesn't work well in IE.

failed solution 3

Using a div covering the whole document, this could be a solution for other people, but not in this precise scenario, because the error message (needs to be clickable) sits in a plex structure (everything is moving and css keeps everything in place). Moving this element on top of the covering div to make it the only clickable solution is a nice solution, but not in this case..

I don't necessarily need a solution to get a pre-bubble click event in IE (although this would be nice) If I could find a trick or a workaround, I could live with it. Any idea?

working solution 3

I ended up using the failed solution 3 and added a fake hit zone representing the message's boundaries. I don't verify the right boundary because messages are always touching the right side of the browser's window.

$('#screencurtain').click(function(event)
{  
    event.stopImmediatePropagation();
    if(event.clientX > $('#messages').offset().left  &&  event.clientY > $('#messages').offset().top && event.clientY < $('#messages').offset().top + $('#messages').height())
    {
        $('#screencurtain').hide();
        $('#messages').click();
    }
    else
    {
        $('.alertbox').effect('pulsate');
    }
});

How can I cancel all click events in a HTML document?

I have a Webapp where a situation can occur where the user needs to accept a message before to go on. The idea is that the message appears and when the user clicks somewhere else the message blinks or tries to catch the user's attention

This app is intended to be used by administrations using IE 8 and up + modern browsers, that's why I was hoping for a jquery solution.

At the moment, I tried:

failed solution 1

$(document).bind('click', function(event){
            event.stopImmediatePropagation();
            $('.alertbox').effect('shake');
            return false;
        });

hoping the return false or the event stop propagation would stop the click, But I found out the event bubbles up from the Dom element to the document, so the dom element fires the click anyway.

failed solution 2

I found a solution in pure JS:

document.addEventListener('click', function(e) {
    e.stopPropagation();
}, true);

using true as a third argument will bind the listener to the capture phase and execute the function before anything else gets executed, but this doesn't work well in IE.

failed solution 3

Using a div covering the whole document, this could be a solution for other people, but not in this precise scenario, because the error message (needs to be clickable) sits in a plex structure (everything is moving and css keeps everything in place). Moving this element on top of the covering div to make it the only clickable solution is a nice solution, but not in this case..

I don't necessarily need a solution to get a pre-bubble click event in IE (although this would be nice) If I could find a trick or a workaround, I could live with it. Any idea?

working solution 3

I ended up using the failed solution 3 and added a fake hit zone representing the message's boundaries. I don't verify the right boundary because messages are always touching the right side of the browser's window.

$('#screencurtain').click(function(event)
{  
    event.stopImmediatePropagation();
    if(event.clientX > $('#messages').offset().left  &&  event.clientY > $('#messages').offset().top && event.clientY < $('#messages').offset().top + $('#messages').height())
    {
        $('#screencurtain').hide();
        $('#messages').click();
    }
    else
    {
        $('.alertbox').effect('pulsate');
    }
});

• javascript
• jquery
• html
• internet-explorer
• click

Share Improve this question Follow edited Sep 3, 2013 at 18:57 Vincent Duprez asked Sep 3, 2013 at 15:53 Vincent DuprezVincent Duprez 3,89299 gold badges3939 silver badges8181 bronze badges 5

• 5 Place a transparent element over the entire document. – Kevin B Commented Sep 3, 2013 at 15:53
• But then how can I detect the user click on the message? Clicking on the message is what makes this situation resolve and make the app usable again. – Vincent Duprez Commented Sep 3, 2013 at 15:56
• 1 Place the message in an element that sits on top of the transparent element. A good example of this is the jQuery UI Dialog using modal: true. – Kevin B Commented Sep 3, 2013 at 15:56
• @KevinB is right. This is solved using a layer over the rest of the document. Very mon everywhere. The message will be over the layer so you would be able to detect clicks over it. – Alvaro Commented Sep 3, 2013 at 15:58
• This is correct in the question's context, however the message sits inside a css structure and cannot sit on top of the other ones.. sorry :) it's position is needed in the layout – Vincent Duprez Commented Sep 3, 2013 at 16:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can place a transparent div covering the entire screen

var screenWidth = $(window).width(), screenHeight = $(window).height();

$("<div>").width(screenWidth).height(screenHeight).css({ 
    zIndex : 100000
}).appendTo("body");

//Disables scrolling if exists
$("html, body").css({ 'overflow' : '100%', 'height' : '100%' });

May be this can help you more:-

$(function() {

$('div').click(function() {
   alert('div1'); 
});

document.addEventListener('click', function(e) { 
    alert('document');
    e.stopPropagation();
}, true);

$('div').click(function() {
   alert('div2'); 
});

});

http://jsfiddle/wLwMh/381/

I think you want to look at .off() http://api.jquery./off/

if you have something with a click event like this:

$("#selector").on('click', function(){
    //do something here
});

at any point you can do this and remove the click handler:

$("#selector").off('click');

or to remove all events from the selector e.g click mouseenter, mouseleave, hover etc just leave .off blank like this:

$("#selector").off();

This way you can remove click events from certain elements then re-enable them when needed.

You almost had it with your 1st attempt. Try this...

$(document).on("click", "*", function(event){
    event.stopImmediatePropagation();
    event.preventDefault();
    $('.alertbox').effect('shake');
});

The real problem es when you want to then be able to click things again.

本文标签： javascriptHow to cancel all click events in document in JQueryStack Overflow