javascript 仅检测填充上的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7462712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting click event on padding only
提问by Randomblue
I have an HTML element with some padding. I would like to detect for clicks on that element's padding. That is, I don't want the event to fire when the user clicks on the content, just the padding.
我有一个带有一些填充的 HTML 元素。我想检测对该元素的填充的点击。也就是说，我不希望在用户点击内容时触发事件，只是填充。
回答by ThiefMaster
Create an inner element which has 100% height/width so it fills out the whole element. Then register a click event handler on this event and prevent bubbling of the event.
创建一个具有 100% 高度/宽度的内部元素，以便填充整个元素。然后在此事件上注册一个单击事件处理程序并防止事件冒泡。
Here's an example (using jQuery): http://jsfiddle.net/ThiefMaster/QPxAp/
这是一个示例（使用 jQuery）：http: //jsfiddle.net/ThiefMaster/QPxAp/
The markup:
标记：
<div id="outer">
<div id="inner"></div>
</div>
and the JS code:
和JS代码：
$('#outer').click(function() {
alert('click');
});
$('#inner').click(function(e) {
e.stopPropagation();
});
Since events bubble, the click event on the inner element hits this element first - stopping its propagation will prevent it from ever reaching the outer element, so its click event handler only triggers if the are that belongs to the element but is not covered by the inner element is clicked.
由于事件冒泡，内部元素上的点击事件首先命中该元素 - 停止其传播将阻止它到达外部元素，因此其点击事件处理程序仅在属于该元素但未被该元素覆盖的情况下才会触发单击内部元素。
回答by davidkonrad
I needed this as well, but also wanted a "real" solution. The accepted answer does really not target the question "Detecting click event on padding only" but suggests an intrusive change to the markup.
我也需要这个，但也想要一个“真正的”解决方案。接受的答案实际上并不是针对“仅检测填充上的点击事件”这个问题，而是建议对标记进行侵入性更改。
A "padding click" can be detected simply by retrieving the elements padding settings, computed width and height and compare those values to the mouse click offsets :
“填充点击”可以通过检索元素填充设置、计算的宽度和高度并将这些值与鼠标点击偏移量进行比较来简单地检测到：
function isPaddingClick(element, e) {
var style = window.getComputedStyle(element, null);
var pTop = parseInt( style.getPropertyValue('padding-top') );
var pRight = parseFloat( style.getPropertyValue('padding-right') );
var pLeft = parseFloat( style.getPropertyValue('padding-left') );
var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
var width = element.offsetWidth;
var height = element.offsetHeight;
var x = parseFloat( e.offsetX );
var y = parseFloat( e.offsetY );
return !(( x > pLeft && x < width - pRight) &&
( y > pTop && y < height - pBottom))
}
demo here -> http://jsfiddle.net/er5w47yf/
演示在这里 - > http://jsfiddle.net/er5w47yf/
jQuery :
jQuery ：
$('#element').on('click', function(e) {
if (isPaddingClick(this, e)) {
console.log('click on padding')
} else {
console.log('click on element')
}
})
native :
本国的 ：
document.getElementById('element').addEventListener('click', function(e) {
if (isPaddingClick(this, e)) {
console.log('click on padding')
} else {
console.log('click on element')
}
}, false)
For convenience, this can be turned into a jQuery pseudo event handler :
为方便起见，可以将其转换为 jQuery 伪事件处理程序：
(function($) {
var isPaddingClick = function(element, e) {
var style = window.getComputedStyle(element, null);
var pTop = parseInt( style.getPropertyValue('padding-top') );
var pRight = parseFloat( style.getPropertyValue('padding-right') );
var pLeft = parseFloat( style.getPropertyValue('padding-left') );
var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
var width = element.offsetWidth;
var height = element.offsetHeight;
var x = parseFloat( e.offsetX );
var y = parseFloat( e.offsetY );
return !(( x > pLeft && x < width - pRight) &&
( y > pTop && y < height - pBottom))
}
$.fn.paddingClick = function(fn) {
this.on('click', function(e) {
if (isPaddingClick(this, e)) {
fn()
}
})
return this
}
}(jQuery));
Now paddingClickworks "natively" :
现在paddingClick“本地”工作：
$('#element').paddingClick(function() {
console.log('padding click')
})
demo -> http://jsfiddle.net/df1ck59r/
回答by Jonathan Wilson
I think this is what ThiefMaster intended to describe. In this scenario, a click on the content will do nothing but a click on the div with lots of padding will yield an action.
我想这就是 ThiefMaster 想要描述的。在这种情况下，单击内容不会执行任何操作，但单击带有大量填充的 div 会产生一个动作。
Basic markup:
基本标记：
<div id="divWithPadding" style="padding:30px;">
<div>Content content content</div>
</div>
then
然后
click listener for content div that prevents bubbling to divWithPadding:
单击用于防止冒泡到 divWithPadding 的内容 div 的侦听器：
$("#divWithPadding > div").click(function(e){
e.stopPropagation();
});
click listener for divWithPadding that does something:
单击用于执行某些操作的 divWithPadding 侦听器：
$("#divWithPadding").click(function(){
//do something
});
