如何使用Jquery在mouseleave函数下正确插入click事件

Question

我正在尝试执行鼠标离开功能，当我离开指定的div并单击鼠标的时候，它会触发我需要的事件。

这就是我所做的代码，但是由于我将其设置为某种方式，因此它不起作用。

<script type="text/javascript">

    jQuery(document).ready(function($) {

        $('#Side-Div1').bind('mouseleave', function() {
            $('body').click(function(e){
                if(e.target.className !== '#Side-Div1'){
                    if($('#Side-Div1').is(":visible")){
                           $('.side-nav').fadeToggle('fast','linear');
                           $('body').removeAttr('style');
                           $('html,body').removeClass('overflow-hidden');
                    }
                }
            }        
        });
    })

</script>

是否有我想念的东西，是否有一种适当的逻辑设置方式可以在一个函数中执行此事件。

Answer 1

您是否尝试过以下方法：

 $('#Side-Div1').mouseleave(function() {

这是带有示例的官方文档： https : //api.jquery.com/mouseleave/

编辑：我不确定它是否可以您想要的方式工作。

Answer 2

作为您的jquery选择器$（'＃Side-Div1'），那么Side-Div1必须是一个ID，而不是类名。 对于按类选择元素，应为：

$('.Side-Div1')

Answer 3

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).mouseup(function(e) { var container = $("#Side-Div1"); // if the target of the click isn't the container nor a descendant of the container if (!container.is(e.target) && container.has(e.target).length === 0) { alert('Do whatever you want.'); } }); </script> </head> <body> <div id="Side-Div1"><p>Click here or outside this to test this functionality</p></div> </body> </html>

如果适用，请使用以下代码。 它仅在您在该div之外单击时才起作用，而在此div上单击则不起作用，希望它会对您有所帮助。

    $(document).mouseup(function(e) {
      var container = $("#Side-Div1");
      if (!container.is(e.target) && container.has(e.target).length === 0) 
      {
       //alert('Do whatever you want.');
         $('.side-nav').fadeToggle('fast','linear');
         $('body').removeAttr('style');
         $('html,body').removeClass('overflow-hidden');
      }
    });

Answer 4

您可以将mouseleave事件绑定到一个布尔变量，然后将click事件附加到主体，如下所示：

 var banner = $("#banner-message") var button = $("button") var hasMouseLeft = false; banner.mouseleave(function() { hasMouseLeft = true; console.log(hasMouseLeft) }) $('body').click(function() { if (hasMouseLeft) { // do your magic here alert('Mouse has left the div !') hasMouseLeft = false; } else { // do something else or return return; } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <p>Hello World</p> <button>Change color</button> </div>

如何使用Jquery在mouseleave函数下正确插入click事件

问题描述

4 个解决方案

解决方案1
0 2019-01-28 06:50:22

解决方案2
0 2019-01-28 06:53:32

解决方案3
0 已采纳 2019-01-28 07:15:57

解决方案4
0 2019-01-28 07:37:40

如何使用Jquery在mouseleave函数下正确插入click事件

问题描述

4 个解决方案

解决方案1 0 2019-01-28 06:50:22

解决方案2 0 2019-01-28 06:53:32

解决方案3 0 已采纳 2019-01-28 07:15:57

解决方案4 0 2019-01-28 07:37:40

解决方案1
0 2019-01-28 06:50:22

解决方案2
0 2019-01-28 06:53:32

解决方案3
0 已采纳 2019-01-28 07:15:57

解决方案4
0 2019-01-28 07:37:40