Javascript 仅检测填充上的单击事件

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

创建一个具有100%高度/宽度的内部元素，以便填充整个元素。然后在此事件上注册click事件处理程序并防止事件冒泡

下面是一个示例（使用jQuery）：

---

标记：

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

---

由于事件冒泡，内部元素上的单击事件首先命中此元素-停止其传播将阻止其到达外部元素，因此，它的click事件处理程序仅在属于元素但未被内部元素覆盖的对象被单击时才会触发。

我认为ThiefMaster打算这样描述。在这个场景中，单击内容将什么也做不了，但是单击带有大量填充的div将产生一个操作

基本标记：

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

单击执行以下操作的divWithPadding的侦听器：

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

---

我也需要这个，但也需要一个“真正的”解决方案。公认的答案并不是针对“仅检测填充上的点击事件”这一问题，而是建议对标记进行侵入性更改

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

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

本地人：

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

---

演示->

+1。。。你赢了我。我的

div

甚至具有相同的ID名称同样的技术不适用于边距而不是填充，因为对于内部

div

，我不能说100%-20px。在这种情况下有什么建议吗？在这种情况下，保证金不被视为要素的一部分。因此，您需要将其包装在一个元素中，并在该元素上使用click事件。在大多数情况下，它都可以工作，但假设我们想要创建一个自定义下拉列表。然后输入是一个元素，下拉列表是另一个元素，该解决方案将这些元素混合在一起。相反，为了清晰起见，我们希望将Dom部分分开。

$('#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)

(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));

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