我是jQuery的新手。我想做的是过滤某些事件进入DIV。
我的页面上有关注
<div id="overlay"></div>
<div id="GameDiv" style="width:1280px; height: 720px;"></div>
覆盖有以下样式
<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个错误。
-
您应用了鼠标事件的DIV上的覆盖层。
-
您应该使用标签
#
,以便通过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>
获取两个事件,您可以按照以下代码段。
$(document).on(
{
mousedown: mouseEvent,
mouseup: mouseEvent,
});
$("#GameDiv").on("click", 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 {
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>
如果您确实需要使用mousedown
和mouseup
事件来完成以下片段。
#overlay {
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>
<script>
$(document).on(
{
mousedown: mouseEvent,
mouseup: mouseEvent,
});
$("#GameDiv").on("mousedown", divEvent);
$("#GameDiv").on("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)
}
</script>
另一种解决方案
请参考下面的摘要,同时致电两个事件
#overlay {
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>
<script>
$(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)
}
</script>
因为您应该使用正确的选择器:'#gamediv'而不是JS中的'gamediv'。