jQuery запускает событие документа в DIV - PullRequest
Новая
       40

jQuery запускает событие документа в DIV

1 голос
/ 04 июля 2019

Я совершенно новичок в 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)
}

Live Пример:

$(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>

Я получаю событие мыши по документу.Но я не получаю 2-е событие div.

Что я сделал не так?

Есть ли лучший способ сделать это?

Ответы [ 3 ]

2 голосов
/ 04 июля 2019

Здесь вы сделали 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>
1 голос
/ 04 июля 2019

Чтобы получить оба события, следуйте приведенному ниже фрагменту кода. 

$(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>
1 голос
/ 04 июля 2019

Потому что вы должны использовать правильный селектор: "#GameDiv" вместо просто "GameDiv" в вашем js.

...