jQuery：对页面上的每个元素执行相同的操作

Question

我已经阅读了很多相关问题，列表如下，但似乎没有一个适用于我的情况。

我希望元素周围出现边框。我已经尝试了下面的代码，但是 $("*") 选择了层次结构中的所有元素，并且边框也出现在父元素周围，这不是我想要的。我只想选择被点击的元素，而不是父元素。

这是脚本

$( "*" ).each(function(){ 
    $(this).on( "mousedown", function(){
        $(this).css("border", "1px solid red");
    }); 

$(this).on( "mouseup", function(){
        $(this).css("border-style", "none");
    });
});

这里列出了我的一些“不太有用”的研究：- javascript - Best Way to Get All DOM Elements with jQuery

jquery get all form elements: input, textarea & select

All Selector (“*”) | jQuery API Documentation

Answer 1

使用* 选择器非常低效，因为它为DOM 中的每个 元素添加了一个事件处理程序。您可以使用事件传播来执行此操作，方法是将事件处理程序放在document 上并使用target 属性引用触发事件的元素。试试这个：

$(document).mousedown(function(e) {
    $(e.target).css('border', '1px solid red');
}).mouseup(function(e) {
    $(e.target).css('border', '0');
});

Example fiddle