时间戳

首页 > 解决方案 > 如果光标已经在元素上，则在页面加载时触发鼠标输入事件

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

问题描述

我已经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>

标签： javascriptjqueryhtmlcss

解决方案

** 编辑后的答案 ** 由于隐藏框不是一个选项，因此请使用布尔值来跟踪用户是否在页面加载之前使用 mouseenter 和 mouseleave 在框上。然后，如果页面加载后布尔值为 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>

推荐阅读