gpt4 book ai didi

javascript - jQuery 触发文档事件到 DIV 中

转载 作者:行者123 更新时间:2023-11-30 09:13:26 26 4
gpt4 key购买 nike

我是 jQuery 的新手。我想做的是过滤某些事件,使其不进入 DIV。

我的页面有关注

<div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>

overlay 有以下样式

  <style>
#overlay {
position: fixed; /* Sit on top of the page content */
display: block; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(1,0,0,0.5); /* Black background with opacity */
z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
pointer-events: auto
}
</style>

我有以下代码

$(document).on(
{
mousedown:mouseEvent,
mouseup:mouseEvent,
});
$("GameDiv").on(
{
mousedown:divEvent,
mouseup:divEvent,
});
function divEvent(e)
{
console.log("div event"+e);
}
function mouseEvent(e)
{
console.log("doc event" + e);
var evnt = jQuery.Event(e.type,e);
$("GameDiv").trigger(evnt)
}

实例:

$(document).on(
{
mousedown:mouseEvent,
mouseup:mouseEvent,
});
$("GameDiv").on(
{
mousedown:divEvent,
mouseup:divEvent,
});
function divEvent(e)
{
console.log("div event"+e);
}
function mouseEvent(e)
{
console.log("doc event" + e);
var evnt = jQuery.Event(e.type,e);
$("GameDiv").trigger(evnt)
}
#overlay {
position: fixed; /* Sit on top of the page content */
display: block; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(1,0,0,0.5); /* Black background with opacity */
z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
pointer-events: auto
}
<div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我正在获取文档鼠标事件。但是我没有收到第二个 div 事件。

我做错了什么?

有更好的方法吗?

最佳答案

在这里,你犯了 2 个错误。

  1. 叠加在您应用了鼠标事件的 div 上。

  2. 您应该使用主题标签 # 以便通过 id 属性进行选择,您还必须在按类属性选择时使用点 .

$(document).on({
mousedown: mouseEvent,
mouseup: mouseEvent,
});

$("#GameDiv").on({
mousedown: divEvent,
mouseup: divEvent,
});

function divEvent(e) {
console.log("div event" + e);
}

function mouseEvent(e) {
console.log("doc event" + e);
//var evnt = jQuery.Event(e.type, e);
//$("#GameDiv").trigger(evnt);

}
#overlay {  position: fixed;  /* Sit on top of the page content */  display: block;  /* Hidden by default */  width: 100%;  /* Full width (cover the whole page) */  height: 100%;  /* Full height (cover the whole page) */  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgba(1, 0, 0, 0.5);  /* Black background with opacity */  z-index: 200;  /* Specify a stack order in case you're using a different order for other elements */  pointer-events: auto}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- div class="overlay"></div comented just to illustrate-->
<div id="GameDiv" style="width:1280px; height: 720px;"></div>

关于javascript - jQuery 触发文档事件到 DIV 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56882651/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com