how to proper insert a click event under mouseleave function using Jquery
Question
I'm trying to do a Mouse leave function and when i leave the specified div and do a mouse click out side of it then it trigger the event i needed.
This is what my code is what i have done but somehow it doesn't work as i have set it to be.
<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>
Is there something i missed of is there a proper way of logical set to do this event in one function.
4 answers
solution1
0 2019-01-28 06:50:22
Have you tried the following:
$('#Side-Div1').mouseleave(function() {
Here is the official Documentation with an example: https://api.jquery.com/mouseleave/
Edit: I am not sure if it can work the way you want it to work.
solution2
0 2019-01-28 06:53:32
As your jquery selector $('#Side-Div1') then Side-Div1 must be an ID not class name. For select element by class, it should be:
$('.Side-Div1')
solution3
0 ACCPTED 2019-01-28 07:15:57
<!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>
Please use below code if it works for you. It will work only when you will click outside this div and it will not work if you click on this div.Hope it will help you.
$(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');
}
});
solution4
0 2019-01-28 07:37:40
You could simply bind the mouseleave event to a boolean variable and keep the click event attached to the body like so:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.