babysbreath

满天星

导航

当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发

Posted on 2016-11-11 14:32  ZikZin  阅读(2643)  评论(0)  编辑  收藏  举报

当一个HTML元素需要添加mouseon、mouseout与click事件，或者mouserenter、mouseleave和click事件时，click事件无法触发

针对上述问题，我遇到的有两种情况：

情况一：已经存在的HTML元素绑定事件，可以使用下面这种绑定方式

$("button").mouseon(function(){
     $("p").text("滑入");
 }).click(function(){
     $("p").text("点击");
 });
或者：
$("button").mouseout(function(){
     $("p").text("滑出");
 }).click(function(){
     $("p").text("点击");
 });
或者：
$("button").hover(function(){
     $("p").text("滑过");
 }).click(function(){
     $("p").text("点击");
 });

情况二：未来存在的要素绑定事件，可以使用下面这种绑定方式

$("button").live("hover click",function(event){
     $("span").text(event.type);
     if(event.type=="mouseenter"){
          $("p").text("滑进");
     }
     if(event.type=="mouseleave"){
          $("p").text("滑出");
     }
     if(event.type=="click"){
         $("p").text("点击");
     }
  });

下面是完整的测试代码：

<html>
 <head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").live("hover click",function(event){
      $("span").text(event.type);
      if(event.type=="mouseenter"){
         $("p").text("滑进");
      }
      if(event.type=="mouseleave"){
         $("p").text("滑出");
      }
      if(event.type=="click"){
         $("p").text("点击");
      }
    });
  });
  </script>
 </head>
 <body>
   <p>这是一个段落。</p>
   <span>显示触发的事件。</span>
   <button>请点击这里</button>
  </body>
</html>