仅在填充上检测单击事件

Question

我有一个带有一些填充的HTML元素。我想检测该元素填充的点击次数。也就是说，当用户点击内容时，我不希望事件触发，只是填充。

Answer 1

创建一个内部元素，其高度/宽度为100％，因此它会填充整个元素。然后在此事件上注册click事件处理程序并防止事件冒泡。

这是一个例子（使用jQuery）：http://jsfiddle.net/ThiefMaster/QPxAp/

---

标记：

<div id="outer">
    <div id="inner"></div>
</div>

和JS代码：

$('#outer').click(function() {
    alert('click');
});

$('#inner').click(function(e) {
    e.stopPropagation();
});

由于事件冒泡，内部元素上的click事件首先会触及此元素 - 停止传播会阻止它传播到外部元素，因此只有属于元素但不是它的click事件处理程序才会触发单击内部元素所覆盖的内容。

Answer 2

我也需要这个，但也想要一个“真正的”解决方案。接受的答案确实没有针对“仅在填充上检测点击事件”的问题，但建议对标记进行侵入式更改。

只需检索元素填充设置，计算的宽度和高度，并将这些值与鼠标点击偏移进行比较，即可检测到“填充点击”：

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))
}

这里的演示 - ＆gt;的 http://jsfiddle.net/er5w47yf/

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)

为方便起见，可以将其转换为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));

现在paddingClick“原生地”工作：

$('#element').paddingClick(function() {
  console.log('padding click')
})

演示 - ＆gt;的 http://jsfiddle.net/df1ck59r/

Answer 3

我认为这就是ThiefMaster打算描述的内容。在这种情况下，单击内容将不会做任何事情，但点击具有大量填充的div将产生一个动作。

基本标记：

<div id="divWithPadding" style="padding:30px;">
   <div>Content content content</div>
</div>

然后

单击侦听内容div，以阻止冒泡到divWithPadding：

$("#divWithPadding > div").click(function(e){
   e.stopPropagation(); 
});

点击divWithPadding的侦听器：

$("#divWithPadding").click(function(){
    //do something
});