Geek asks and answers

Is it possible to set a default warning for all events of an element at once?

Possible duplicate:
jQuery - How to bind all events to a DOM element?

Imagine if we want some element to be completely initeractable.

We could, of course, associate the default warning for the click event as follows:

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

But this is just one event, and there are many others, such as guidance, focus, selectstart, and more.

We could specify them all in one line, for example, "click focus hover dblclick blur selectstart", but this does not make much sense and is not easy to maintain.

So, is it possible to bind an event listener without highlighting the type of event? Maybe some custom JavaScript listeners allow this?

+5
6

, . , script .

, div bg , .

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

, , , .

, div.mask .

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

, tabindex -1

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

.

EDIT2

, jQuery, lock() unlock() .

. : 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 )
+1

, , . , script, .

script, , . , script, , , . Javascript , .

, , , . , ( , - ), , CSS, , script, .

, , ( click).

<!-- 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);
    });
});

. click . , . form, , , . . . , , supression , . , , , .

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

jQuery :

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

Default :

click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave keydown keypress

FIDDLE

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

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

;)

0

jQuery , :

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
});
0

, , ! .

"form *" , .

Due to the bubbling effect of javascript events, you can assign an event handler for all catch events to the parent element of eigther $("form")or $("body")add it to it preventDefault().

Code example:

$("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>​

The concept of capturing all events in a parent is often referred to as event delegation .

0
source

More articles:


All Articles