點擊元素，但檢測到懸停

Question

我有一個元素，坐在我的頁面中間作爲傳感器。該元素大於其下面的區域，其中包含鏈接。我需要能夠在寄存器當鼠標移動/移動傳感器，以及點擊下面的鏈接。

我看過所以，但我找不到解決方案適用於我的問題，因爲我需要這個圓形傳感器浮在頁面中間。

#css 
.sensor { 
    pointer-events: none; # does not register jquery's mouseenter, but allows the links to be clicked 
} 

#javascript 
$('.sensor').mouseenter(doStuff) #only works if pointer events are enabled 

這是一個基本樣機的小提琴：提前

http://jsfiddle.net/3rym41ra/

感謝。

Answer 1

我在頁面上放置了一個圓形傳感器，它在盤旋時改變背景。 由於傳感器現在是鏈接的父級，所有事件都會冒泡。您可以在元素，但還是使用傳感器的某些區域，只要你喜歡

$('body').mousemove(function(e) { 
 

 
    // We want it circular on page so we take 50% left and 50% top as the middle 
 
    // Cirle has radius = 100px 
 

 
    var middle = { 
 
    x: $(window).width()/2, 
 
    y: $(window).height()/2 
 
    }; // Our middle-point 
 
    var normalize = { 
 
    x: middle.x - e.pageX, 
 
    y: middle.y - e.pageY 
 
    }; // mouse-position relative to the middle 
 
    var radius = 100; // radius 
 

 
    // some Math 
 
    if (normalize.x * normalize.x + normalize.y * normalize.y < radius * radius) { 
 
    // inside circle 
 
    $('body').css('background', 'red'); 
 
    } else { 
 
    // outside 
 
    $('body').css('background', 'white'); 
 
    } 
 

 

 
})

body, 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#">One</a> 
 
<a href="#">Two</a> 
 
<a href="#">Three</a> 
 
<a href="#">Four</a>