仅在填充上检测单击事件

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事件首先会触及此元素 - 停止它的传播将阻止它到达外部元素,因此只有当属于元素但未被单击内部元素.

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

演示在这里 - > 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') 
  }
})

本国的 ：

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

演示 -> http://jsfiddle.net/df1ck59r/