代码之家 › 专栏 › 技术社区 › XMen

单击事件时取消绑定鼠标悬停事件

mouseevent events jquery

XMen · 技术社区 · 15 年前

嗨,我有下面的代码在这里我有div卡-208点击我不想显示div to show div但在鼠标上我想显示它会有一些延迟,但不是点击

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.card {
 border:1px solid transparent;
 cursor:pointer;
 float:left;
 height:50px;
 margin:10px;
 padding:3px;
 width:50px;
 background:#000;
 color:#fff;

}
.ui-corner-all {
 -moz-border-radius:4px 4px 4px 4px !important;
}
</style>
</head>
<body>
<!--  <div id="popupContact"  style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
 </div> -->
<div class="card  ui-corner-all" id="card-208">   
 <div class="card-name">    Rahul1's Gib 1       </div>   
</div>
'<div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">
  dsfdssd <a href="#">rahul</a>
 </div>

</body>
</html>
<script  type='text/javascript'>
$(document).ready(function(){
 var popup_pos=$('#card-208').offset();
 var timer;
 $("#card-208").bind('mouseover',{},function() {

      setTimeout(function() {
   $("#divtoshow").show();
  }, 1000);
  }); 
 $("#card-208").bind('click',{},function() {
  $("#card-208").unbind('mouseover');
      alert('click event is triggered');





  }); 

 $("#divtoshow").bind('mouseleave',{} ,function() { 
      $("#divtoshow").hide();
  });
});
</script>

2 回复 | 直到 15 年前

Flo Edelmann 15 年前

这就是你想要的吗?

show_timeout = false;
$(".card")
  .mouseover(function() {
    show_timeout = window.setTimeout(function() {
      $("#divtoshow").show(500);
    }, 1000);
  })
  .click(function() {
    window.clearTimeout(show_timeout);
  });

interesting eyy 12 年前

     <div class="card  ui-corner-all" id="card-208" onmouseover="displaydiv()"
     onclick="hidediv()"> </div>

     <script>
     function displaydiv()
     {
     $('#divtoshow').css('display','block');
     }

     function hidediv()
     {
     $('#divtoshow').css('display','none');
     }
     </script>

推荐文章