Giters

carlsednaoui / ouibounce

Increase your landing page conversion rates.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Incorrect behaviour when entering <html> (instead of leaving)

s16h opened this issue · comments

commented

If you load the page when the mouse pointer is still in the bar of the browser (say, on the address field) and after the page is loaded you moved the mouse onto the page to start looking at the website (as you do), the modal will get activated (at least that's the behavior in Chrome Version 34.0.1847.116 m on Windows 7).
I think instead of mouseout, mouseleave should be used.

commented

agreed. same behavior on Firefox 29.0.1, Windows 7 x64

commented

Thanks @s16h, we can look into mouseleave and update the code if makes sense. I think this issue addresses something similar to what you're mentioning: #26 but we didn't look into mouseleave at the time.

Have you have a chance to run the script with mouseleave on your end? Does this solve the problem?

/cc: @bergerjac

commented

I haven't tried yet. I'm going to fork and try to fix this later today (or possibly over the weekend).

commented

According to MDN example, which illustrates the difference between mouseout and mouseleave events

mouseout fires when the cursor moves off the element and onto another, including firing when moving between children (current implementation)

mouseleave fires when the cursor moves completely off of the element and its tree

using only mouseleave seems like it would provide the intended behavior

  1. open Dev Tools on this page
  2. open console
  3. paste this snippet (which selects the whole comment section)
  4. note behavior when hovering around the page, within the comments, etc.
  5. reload page
  6. replace mouseout with mouseleave
  7. repeat hover test
var test = document.getElementById("discussion_bucket");  
  test.addEventListener("mouseout", function( event ) {   
    event.target.style.color = "red";
    setTimeout(function() { event.target.style.color = ""; }, 2000);
  }, false);
commented

This is great @bergerjac! Here's another way to test:

Mouseout

$('body').on('mouseout', function(e) {console.log('out')});

Mouseleave

$('body').on('mouseleave', function(e) {console.log('leave')});

Want to submit a PR?

commented

Closed with #45