от
Я совершенно новичок в JQuery. Я хотел отфильтровать определенные события от попадания в DIV. У меня есть подписка на моей странице
 

оверлей имеет следующий стиль
  
  #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

У меня есть следующий код

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

Я получаю событие мыши для документа. Но я не получаю 2-е событие Div. Что я сделал не так? Есть ли лучший способ сделать это?              

Ваш ответ

Отображаемое имя (по желанию):
Конфиденциальность: Ваш электронный адрес будет использоваться только для отправки уведомлений.
Анти-спам проверка:
Чтобы избежать проверки в будущем, пожалуйста войдите или зарегистрируйтесь.

3 Ответы

0 голосов
от
Чтобы получить оба события, вы можете следовать приведенному ниже фрагменту кода.
$(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
0 голосов
от
Здесь вы сделали 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
0 голосов
от
Потому что вы должны использовать правильный селектор: «#GameDiv» вместо просто «GameDiv» в вашем JS.     
...