Question

我已经将mouseenter事件与页面上的某些元素绑定在一起，我在允许mouseenter的实际功能运行之前检查页面是否已加载。一切正常，但问题是，如果用户已经在页面加载之前将光标放置在元素上，则会强制用户首先移出div，然后再次将光标移至div 导致事件触发，这很尴尬。

有没有一种方法可以检查游标在页面加载中的位置，例如在游标悬停在哪个元素上并相应地触发mouseenter事件？

我附上了一段代码，以更好地了解我的问题。

谢谢。

let pageLoaded;

/* assuming page load takes 3 seconds*/
window.onload = () => setTimeout(() => pageLoaded = true, 3000)

$(document).ready(() => {

  $('#box').mouseenter(() => {

    /* continue only if the page has been loaded */
    if (!pageLoaded)
      return;

    $('body').append('mouse entered after page load <br>')


  })
})

#box {
  height: 150px;
  width: 150px;
  background-color: green;
  margin:10px;
  cursor:pointer;
  float: left;
}

 p {
  font-style: italic;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box">
</div>

<p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>

Answer 1

[编辑] 我在框中使用mousemove，但是需要将鼠标移动1px或更多，这是代码

let pageLoaded;

/* assuming page load takes 3 seconds*/
window.onload = () => setTimeout(() => pageLoaded = true, 3000)

$(document).ready(() => {
//created for control and trigger event only one time
var outControl = true;
  $('#box').mousemove(() => {
    /* continue only if the page has been loaded */
    if (!pageLoaded)
      return;
	if(outControl){
		outControl = false;
		$('body').append('mouse entered after page load <br>')
	}
  })
  
  $( "#box" ).mouseout(function() {
	outControl = true;
	$('body').append('mouse left after page load <br>')
});
})

#box {
  height: 150px;
  width: 150px;
  background-color: green;
  margin:10px;
  cursor:pointer;
  float: left;
}

 p {
  font-style: italic;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>

<p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>

[编辑] 抱歉，但是在移动之前无法获得鼠标的位置，浏览器在移动之前没有此信息，您可能会认为“那我将在页面顶部手动触发该事件”，这也不起作用：（

[SECOND_EDIT] 在这种情况下，我使用localStorage，不可能在截断的代码中对此进行测试，但是将其粘贴在同一示例中，但是在本地页面上，这对我来说很好用。这段代码不是很好（我没有很多时间），但是您可以使用localStorage作为一个更好的解决方案的开始

let pageLoaded;

window.onload = () => setTimeout(() => pageLoaded = true, 3000)

$(document).ready(function (e){
  $('#box').mousemove((e) => {
    /* continue only if the page has been loaded */
    if (!pageLoaded){
        if(outControl){
            localStorage.setItem("mouseHoverElementId",e.target.id)
            $('body').append('mouse entered before page load <br>')
            outControl = false;
        }

        return;
        }
    if(outControl){
        localStorage.setItem("mouseHoverElementId",e.target.id)
        outControl = false;
        $('body').append('mouse entered after page load <br>')
    }
  })

  $( "#box" ).mouseout(function() {
    localStorage.setItem("mouseHoverElementId","")
    outControl = true;
    !pageLoaded ? $('body').append('mouse left before page load <br>') : $('body').append('mouse left after page load <br>')
});
//created for control and trigger event only one time
var outControl = true;
if(localStorage.getItem("mouseHoverElementId") != ""){
        $('#'+ localStorage.getItem("mouseHoverElementId")).mousemove();
    }
})

Answer 2

您可以注册一个mousemove侦听器，该侦听器用jQuery.one执行一次并存储鼠标位置。然后，您将获得参考元素的位置并进行比较。如果元素发生冲突，则只需使用jQuery trigger方法。

Answer 3

我建议您在页面内创建一个区域，例如页面的不同部分，并使用if语句检查页面加载时鼠标光标的位置，然后在检查结果为真时运行想要执行的操作。那是我的建议。

Answer 4

**编辑的答案** 由于无法隐藏框，因此请使用布尔值来跟踪用户是否在框中，方法是使用在页面加载之前。然后，如果在页面加载后布尔值为true，则手动调用与mouseover事件相同的逻辑。然后删除mouseenter和mouseleave侦听器。

let pageLoaded;
let insideBox = false;

/* assuming page load takes 3 seconds*/
window.onload = () => setTimeout(function() {
  pageLoaded = true;
  if (insideBox) {
    // Manually call the mouseover logic here
    $('body').append('mouse entered BEFORE page load <br>')
  }
  $('#box').off('mouseenter').off('mouseleave')
}, 3000)


$(document).ready(() => {
$('#box').on('mouseenter', function() {
   insideBox = true;
})
$('#box').on('mouseleave', function() {
   insideBox = false;
})

$('#box').mouseover(() => {
    /* continue only if the page has been loaded */
    if (!pageLoaded)
      return;

    $('body').append('mouse entered after page load <br>')
  })
})

#box {
  height: 150px;
  width: 150px;
  background-color: green;
  margin:10px;
  cursor:pointer;
  float: left;
}

 p {
  font-style: italic;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box">
</div>

<p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>

如果元素上已经有光标，则在页面加载时触发鼠标进入事件

4 个答案: