Javascript 是否可以一次为元素的所有事件指定阻止默认值？

可能重复：

想象一下，如果我们想使某个元素完全可初始化

当然，我们可以为click事件绑定一个prevent默认值，如下所示：

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

但这只是一个事件，还有很多，比如悬停、聚焦、选择开始等等

我们可以在一行中指定它们，比如“单击焦点悬停dblclick blur selectstart”，但这没有多大意义，也不容易维护

---

那么，是否可以在不区分事件类型的情况下绑定事件侦听器？也许一些本地JavaScript侦听器允许这样做？

没有这种可能性，因为不是所有元素都支持相同的事件，也不是所有事件的行为方式都相同。您始终必须显式地提供一个事件列表，无论是静态定义的还是吐出事件名称的

尽管我链接到了一个脚本，该脚本创建了一个事件名称数组，但这些名称仅在一个元素上创建。当然，您应该使用一个更复杂、更慢的脚本来生成它，该脚本枚举所有相关元素并添加缺少的事件。使用Javascript对象作为关联数组，可以更快地搜索是否添加了特定事件

更好的建议 您试图做的可能是一个高度过度设计的解决方案。当我创建一个应该禁用某些元素（链接、按钮或其他任何元素）的演示可单击界面时，我宁愿通过定义一个CSS类来禁用有问题的元素，并使用一个简单的脚本来禁用这些元素

您还可以通过提供要在特定元素上禁用的事件（默认为

单击

事件），进一步利用这一点

使用智能默认值 上面的示例定义了一个单一的默认事件<代码>单击事件。这很好，在大多数情况下都有效，但并非所有情况下都有效<例如，代码>表单元素必须始终定义应禁用的提交事件。所以那么，智能默认值。我们还应该考虑一个事实，即需要抑制强列表的列表事件通常是短<强>。如果我们涵盖了大多数使用默认值的情况，那么对于那些实际偏离默认值的元素，我们只有一小部分开销

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

---

现在更容易维护；）

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

---

可以像这样绑定大多数jQuery事件：

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

这将防止在以下事件中出现默认情况：

单击数据库单击鼠标向下鼠标向上鼠标向上移动鼠标向上鼠标向外移动 mouseenter mouseleave keydown按键press keydup上下文菜单

---

是的，一次捕获一种类型的所有事件是可能的但您需要显式指定所有事件类型

“form*”

的代码示例效率低下，无法捕获在代码执行后添加的元素上的事件

由于javascript事件的冒泡效应，您可以在most父元素eigther

$（“form”）

或

$（“body”）

上分配一个catch-all事件处理程序，并向其添加

preventDefault（）

示例代码：

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

$（“a”）。单击（“click”，函数（）{
$（“正文”）。追加（单击…
）；
});
$（“正文”）。在（“单击”）上，函数（e）{
e、 预防默认值（）；
});

与：

​

• 在JSFIDLE上：

---

捕获父元素上的所有事件的概念通常被称为事件委派

在考虑了所有选项之后，它仍然不适合所有的事件推送。由于它还必须单独绑定每个事件的处理程序，因此脚本也会影响性能

我将坚持使用一个更简单的解决方案，只需在顶部放置一个带有透明bg的div来覆盖我们的元素

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

更新后的提琴也可以防止拉舌

EDIT2

或者，我们可以扩展jQuery，在任何元素上使用自定义的

lock（）

和

unlock（）

函数

见最后一把小提琴：

（函数（$）{
$.fn.lock=函数（）{
返回此值。每个（函数（）{
$（this）.css（'position'，'relative'）.prepend（$（''）.find（'input，textarea，select'）.attr（'tabindex'，'-1'）；
});
};   
$.fn.unlock=函数（）{
返回此值。每个（函数（）{
$（this.find（'*'）.removeAttr（'tabindex'）.filter（'.mask'）.remove（）；
});
};
})（jQuery）

看看这个问题，这样做有什么好处？你想重新发明轮子吗？我想锁定我的表格和一些元素。如果没有简单的方法，也许我应该在顶部放置一个透明的bg div。但其他的方法是什么呢？介意分享车轮吗？：）我现在明白了，没有简单的方法。在这种情况下，我将不得不考虑一些完全不同的方法。@Anonymous:我对我的答案进行了大量编辑，以提供一个简单而好的解决方案，它可能对您和我都有效。根据你对这个问题的评论，我可以看出我的解决方案非常适合你。上面的例子正是我使用的方法。问题在于，所有输入元素都有不同的属性，例如，复选框甚至可能通过在键盘上按Tab键和空格键触发。每次我们想要实现它都需要大量的脚本编写、大量的思考和大量的时间。@Anonymous:您显然没有使用这种方法，因为如果您禁用

表单

元素（如示例所示），无论触发它的是什么，都不会发生表单提交。但是，如果需要，您也可以禁用keydown事件并按下元素。这种方法允许这样做。我确实使用了精确的方法，它确实有效，而且确实有效

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

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

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

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

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

(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 )