Is it possible to assign prevent default for all the events of an element at once?

Question

Possible Duplicate:
jQuery - How can I bind all events on a DOM element?

Imagine, if we want to make some element completely initeractable.

We could, of course bind a prevent default for a click event as follows:

$('form *').bind('click', function(event) {
    event.preventDefault();
});

But that's just one event, and there are many more, like hover, focus, selectstart, and many more.

We could specify them all in one line like 'click focus hover dblclick blur selectstart' but that doesn't make much sense and is not easy to maintain.

So, is it possible to bind an event listener without discriminating for the type of the event? Maybe some native JavaScript listeners allow it?

Answer 1

No such possibility because not all elements support same events and not all events behave in the same way. You always have to explicitly provide a list of events whether defined statically or dynamically by a script that spits out event names.

Even though I linked to a script that creates an array of event names, these are made on one element only. You should of course be generating this with a more complex and slower script that enumerates over all elements in question and adds missing events. Using Javascript objects as associative array for faster searching whether a particular event has been added or not.

A better suggestion

What you're trying to do is likely a highly over-engineered solution. When I'm creating a demo clickable interface that should disable some elements (be it links, buttons or anything else) I rather do it by defining a CSS class that disables an element in question and have a simple script that does disabling afterwards.

You could leverage this even further by also providing which events you'd like to disable on particular element (with default being a click event).

<!-- no events; use defaults -->
<a href="#" class="disable">No-follow link</a>
<button class="disable">Nothing happens</button>
<!-- provide events -->
<a href="#" class="disable" data-events="click blur">No-follow link</a>
<form class="disable" data-events="submit">...</form>

Script

$(function() {

    var disable = function(evt) {
        evt.preventDefault();
        console.log("Prevented on " + evt.target.tagName);
    };

    $(".disable").each(function() {
        var ctx = $(this);
        ctx.bind(ctx.data("events") || "click", disable);
    });
});

Using smart defaults

Upper example defines one single event default. click event. This is fine and works in majority of cases, but not in all. form elements for instance would always have to define submit event that should be disabled. So. Smart defaults then. We should also consider the fact that list events that need supression is usually short. And if we cover majority of cases using defaults we only have a small overhead on those elements that actually do deviate from defaults.

$(function() {

    // click is still default event
    // this object defines per element events that aren't just click
    var extraDefaults = {
        form: "submit"
    };

    var disable = function(evt) {
        evt.preventDefault();
        console.log("Prevented on " + evt.target.tagName);
    };

    $(".disable").each(function() {
        var ctx = $(this);
        ctx.bind(
            // use inline-defined events
            ctx.data("events") ||
            // use extra defaults if present
            extraDefaults[this.tagName.toLower()] ||
            // just use default click event
            "click",
            disable);
    });
});

Answer 2

You can bind most jQuery events like this :

$("#elementID").on(Object.keys(jQuery.event.fixHooks).join(" "), function(e) { 
    e.preventDefault(); 
});

This will preventDefault on the following events :

click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave keydown keypress keyup contextmenu

FIDDLE

Answer 3

Well after considering all the options, it still does not look convenient for all this event hustling. As it also has to bind the handlers for each event individually the script will hit the performance as well.

I am going to stick with a much simpler solution, just putting a div with transparent bg on top to cover our element.

$('form').css('position','relative').prepend($('<div class="mask" style="position:absolute;z-index:9000;height:100%;width:100%;background-image:url(1px_transparent.png);"></div>'));

Which is going to automatically fill the whole area of the element, alternatively, we can use a half-transparent picture so it will be also understood by a user that this is locked element, and would not cause confusion.

And to unlock we simply remove the .mask div from our element.

EDIT

New Fiddle: http://jsfiddle.net/YAdXk/8/

Actually we can disable tabbing by setting tabindex attribute to -1

.find('input,textarea,select').attr('tabindex','-1');

The updated fiddle prevents from tabbing as well.

EDIT2

OR, we can extend jQuery to use our custom lock() and unlock() functions on any element.

See the last fiddle: http://jsfiddle.net/YAdXk/13/

(function($) {
$.fn.lock= function() {
    return this.each(function() {
        $(this).css('position','relative').prepend($('<div class="mask" style="position:absolute;z-index:9000;height:100%;width:100%;background-image:url('+transparent_picture+');"></div>')).find('input,textarea,select').attr('tabindex','-1');
    });
};   

$.fn.unlock= function() {
    return this.each(function() {
        $(this).find('*').removeAttr('tabindex').filter('.mask').remove();
   });
};

})( jQuery )

Answer 4

var all_events = "click blur focus mouse"; //etc...

$('form *').bind(all_events, function(event) {
        event.preventDefault();
});

Now is easier to maintain ;)

Answer 5

jQuery defines all shortcut event types here, so you can use that string to store all events for re-use:

var events = "blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error contextmenu";

$('button').bind(events, function() {
    // hey
});

Answer 6

Yes, it is possible, to catch all events of one type at once! But you'll need to specify all the event types explicitly.

Your code example of "form *" is inefficient, and would not catch events on elements that are added after your code executes.

Because of the bubbling effect of javascript events, you can assign a catch all event handler on the most parent element, eigther $("form") or $("body"), and add preventDefault() to that.

Example code:

$("a").on("click", function() {
    $("body").append("<p>Clicked...</p>");
});
$("body").on("click", function(e) {
  e.preventDefault();
});

with:

<div>
    <p><a href="#" target="_blank">Click on me</a></p>
</div>​

• On JSfiddle: http://jsfiddle.net/erlang/EHeBK/

The concept of catching all events on a parent element, is often referred to as event delegation.