[Js & amp; jquery] The Mask Layer disables mouse events of elements such as a, span, and button.

I am writing an interface just now. For the sake of considering the background image, the tag is used instead of the Button.

After clicking a button, you should disable the element. It is easier to disable the element. Add a disabled element.

However, there is no good way for a, and href = "" cannot be used. What's more, I am using the onclick function.

So Baidu took a look, and then saw the implementation of the useful mask. The source code had bugs, and then it was rewritten according to its own ideas.

---------

Paste the code below. The implementation method of this mask layer is actually a layer outside the current element wrap. A transparent layer with a large z-index is added to the layer to directly cover the original element.

1/* Mask Layer Code 2: prevents too many forms from being submitted through the mask layer. 3 */4 function MaskIt (obj) {5 var hoverdiv = '<div class = "divMask">; 6 $ (obj ). wrap ('<div class = "position: relative;"> </div>'); 7 $ (obj ). before (hoverdiv); 8 $ (obj ). data ("mask", true); 9} 10 function UnMaskIt (obj) {11 if ($ (obj ). data ("mask") = true) {12 $ (obj ). parent (). find (". divMask "). remove (); 13 $ (obj ). unwrap (); 14 $ (obj ). data ("mask", false); 15} 16 $ (obj ). data ("mask", false); 17}

The call method is simple. For example, there is a <a id = "test1"> click me </a>

You can simply:

MaskIt ($ ('# test1 '));

You can add a mask, and the solution mask is the same.

That's all.