The JS & jquery masking layer implements mouse events that prohibit elements such as a, span, button, and so on
Last Update:2014-05-11
Source: Internet
Author: User
<span id="Label3"></p><p><p>Just writing an interface, in order to consider the background picture, so the use of a button instead of a tag</p></p><p><p>You should disable the A element after clicking, it is easier to disable the button, plus a disabled.</p></p><p><p>But for a but there is no good way, always can not put href= "", not to mention I was walking the onclick function</p></p><p><p>So Baidu a bit, and then see a useful mask implementation, the source code has a bug, and then follow its own ideas to rewrite a bit</p></p><p><p>---------</p></p><p><p>Stick to the code below, this mask layer implementation is actually a layer outside the current element wrap, a layer of a z-index larger transparent layer, directly covering the original elements</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">1</span></span> <span style="color: rgb(0, 128, 0);"><span style="color: rgb(0, 128, 0);">/*</span></span><span style="color: rgb(0, 128, 0);"><span style="color: rgb(0, 128, 0);">Mask Layer Code</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">2</span></span> <span style="color: rgb(0, 128, 0);"><span style="color: rgb(0, 128, 0);">role: prevent too many forms from being submitted by masking layers</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">3</span></span> <span style="color: rgb(0, 128, 0);"><span style="color: rgb(0, 128, 0);">*/</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">4</span></span> <span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">function</span></span><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">Maskit (obj) {</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">5</span></span> <span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">var</span></span>Hoverdiv = ' <div class= "divmask" style= "position:absolute; width:100%; height:100%; left:0px; top:0px; Background: #fff; opacity:0; Filter:alpha (opacity=0); z-index:5; " ></div> '<span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">;</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">6</span></span>$ (obj). Wrap (' <div class= "position:relative;" ></div> '<span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">);</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">7</span></span> <span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">$ (obj). before (hoverdiv);</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">8</span></span>$ (obj). Data ("mask",<span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">true</span></span><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">);</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">9</span></span> <span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">}</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);">Ten</span></span> <span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">function</span></span><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">Unmaskit (obj) {</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> one</span> <span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">if</span></span>($ (obj). Data ("mask") = =<span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">true</span></span><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">){</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> a</span>$ (obj). Parent (). Find (". divmask"<span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">). Remove ();</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> -</span> <span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">$ (obj). Unwrap ();</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> -</span>$ (obj). Data ("mask",<span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">false</span></span><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">);</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> the</span> <span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);"> }</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> -</span>$ (obj). Data ("mask",<span style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">false</span></span><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);">);</span></span><span style="color: rgb(0, 128, 128);"><span style="color: rgb(0, 128, 128);"></span> -</span>}</pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>The call method is very simple, for example, now there is a <a id= "test1" > Point me </a></p></p><p><p>directly, you can:</p></p><p><p>Maskit ($ (' #test1 '));</p></p><p><p>You can add a mask, and the hood is the Same.</p></p><p><p> </p></p><p><p>That's All.</p></p></span>
