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

Question

I have read so many related questions, the list is given below but none seems to be applicable in my situation.

I want that a border should appear around the element. I have tried the below code but $("*") selects all the elements in the hierarchy, and the border appears around parent elements as well, which is not what I want. I want to select only the clicked element, and NOT THE PARENT ELEMENTS.

Here is the script

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

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

Here goes a list of some of my 'not so useful' research: - 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

Using the * selector is incredibly inefficient as it adds an event handler to every element in the DOM. You could use event propagation to do this instead by placing the event handler on the document and referencing the element which triggered the event using the target property. Try this:

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

Example fiddle