Есть ли способ стрелять по событиям, игнорируя z-index? - PullRequest
Новая
       29

Есть ли способ стрелять по событиям, игнорируя z-index?

6 голосов
/ 26 октября 2010

Если у меня есть что-то вроде этого:

alt text

Есть ли способ вызвать события наведения курсора на ОБА Div?

Редактировать: Извините все ..Я попытался упростить проблему, чтобы она была понятна, и я забыл упомянуть, что у меня более 100 таких дел, поэтому, вероятно, эти решения не работают.Я посмотрю, смогу ли я их адаптировать.Все равно большое спасибо.

Ответы [ 2 ]

4 голосов
/ 26 октября 2010

Я собрал здесь рабочий пример с JSFiddle:

http://jsfiddle.net/gfosco/CU5YT/

Это похоже на ответ madeinstefanos, но специфично для вашего примера .. 

var mouseX = 0;
var mouseY = 0;
var front = 0;
var back = 0;

function log(text) {
    $("#log").append(text + '<BR>');
}

function mouseWithin(selector) {
  var pos = $(selector).position();
  var top = pos.top;
  var left = pos.left;
  var height = $(selector).height();
  var width = $(selector).width();

  if (mouseX >= left && mouseY >= top && mouseX <= left + width 
                     && mouseY <= top + height) {
    return true;
  }
  return false;
}

$(document).bind('mousemove', function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    if (front == 1 && !mouseWithin("#front")) {
            front = 0;
            log('Front Leave');
    }
    if (back == 1 && !mouseWithin("#back")) {
            back = 0;
            log('Back Leave');
    }    
    if (front === 0 && mouseWithin("#front")) {     
            front = 1;
            log('Front Hover');
    }
    if (back === 0 && mouseWithin("#back")) { 
            back = 1;
            log('Back Hover');
    }        

});
3 голосов
/ 26 октября 2010

Это возможно. Вы не можете получить событие mouseenter | mouseover для части элемента, которая находится ниже другого элемента, но если вы знаете размеры и положение элемента, вы можете прослушать событие mousemove и получить, когда мышь входит в какую-то конкретную область.

Я создал два div, как ваш: 

<div id="aboveDiv" style="position:absolute;top:30px;left:30px;width:100px;height:100px;background-color:red;z-index:2;"></div>
<div id="belowDiv" style="position:absolute;top:80px;left:80px;width:100px;height:100px;background-color:green;z-index:1;"></div>

И я хочу знать, когда мышь входит в область, занятую элементом div, который находится ниже, для этого я написал этот скрипт: 

$(function (){

  var divOffset = {
    top: $("#belowDiv").position().top,
    left: $("#belowDiv").position().left,
    right: $("#belowDiv").position().left + $("#belowDiv").width(),
    bottom: $("#belowDiv").position().top + $("#belowDiv").height(),
    isOver: false
  }


  $(window).mousemove(function (event){
    if (event.pageX >= divOffset.left && event.pageX <= divOffset.right && event.pageY >= divOffset.top && event.pageY <= divOffset.bottom){
      if (!divOffset.isOver){
        divOffset.isOver = true;

        /* handler the event */
        alert("gotcha");
      }
    }else{
      if (divOffset.isOver){
        divOffset.isOver = false;
      }
    }
  });
});

Это не так просто, как слушать mousenter | mouseover, но отлично работает.

Здесь ссылка на скрипка

...