jQuery 触发文档事件变成 DIV
jQuery trigger document event into a DIV
我对 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 您已应用鼠标事件。
您应该使用主题标签 #
以便 select by id 属性,
你也必须使用点 .
而 selecting by class 属性。
$(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>
因为你应该在你的 js 中使用正确的选择器:'#GameDiv' 而不是 'GameDiv'。
要获取这两个事件,您可以按照以下代码片段进行操作。
$(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>
Another solution
参考下面的代码片段同时调用这两个事件
#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>
我对 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 您已应用鼠标事件。
您应该使用主题标签
#
以便 select by id 属性, 你也必须使用点.
而 selecting by class 属性。
$(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>
因为你应该在你的 js 中使用正确的选择器:'#GameDiv' 而不是 'GameDiv'。
要获取这两个事件,您可以按照以下代码片段进行操作。
$(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>
Another solution
参考下面的代码片段同时调用这两个事件
#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>