jQuery cancel specific click event-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery cancel specific click event

May 16, 2016 pm 03:57 PM

This article mainly introduces jQuery's method of canceling specific click events, and analyzes the related techniques of jQuery to simply implement event binding and cancel event binding in the form of examples. Friends in need can refer to it

As we all know, jQuery can bind the same event multiple times, and each bound event can be executed. Here comes the problem. In the dynamically generated DOM, we bind two different clicks (assumed to be A and B) for a certain element. When appending the element, all elements are bound to B again... This will lead to the final When clicked, the B event will double up.

Fortunately, jQuery provides us with a very elegant way to cancel clicks under a specific namespace.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
  &lt;title&gt;无标题页&lt;/title&gt;
  &lt;script src=&quot;jquery/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(function(){
      $(&quot;#pTest&quot;).click(function(){
        alert(&quot;正式事件。&quot;);
      });
    });
    function bindEvent(){
      for(var i=0;i&lt;3;i++){
        $(&quot;#pTest&quot;).bind(&quot;click.test&quot;,function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert(&quot;测试事件&quot;);
    }
    function ignoreMultiEvent(){
      $(&quot;#pTest&quot;).unbind(&quot;click.test&quot;).bind(&quot;click.test&quot;,function(){
        testEvent();
      });
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p id=&quot;pTest&quot; style=&quot;height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;&quot;&gt;
    点我进行测试
  &lt;/p&gt;
  &lt;input id=&quot;Button2&quot; type=&quot;button&quot; value=&quot;为上面的p绑定3次测试事件&quot; onclick=&quot;bindEvent()&quot; /&gt;
  &lt;input id=&quot;Button1&quot; type=&quot;button&quot; value=&quot;保留正式事件， 取消已绑定的多次测试事件，再绑定一次测试事件 &quot; onclick=&quot;ignoreMultiEvent()&quot; /&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

For more related tutorials, please visit JavaScript video tutorial

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn