Question

我有一个元素的简单div：

<div id="drop-zone">
    <input type="file" style="display: none;" multiple="multiple">
</div>

当我单击#drop-zone时，我想手动触发input。我正在尝试这样：

jQuery('#drop-zone:not(input)').click(function() {
    jQuery(this).find('input[type="file"]').trigger('click')
})

主要问题是，作为父元素上的手动单击触发侦听器时，我的点击循环无穷。

Answer 1

检查点击的当前目标的标记名称：

jQuery('#drop-zone').click(function(e) {
    if(e.currentTarget.tagName !== "INPUT")
        jQuery(this).find('input[type="file"]').trigger('click')
})

Answer 2

也许这就是您想要的：

var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
  var mtarget = document.elementFromPoint(x_m, y_m);
  if (mtarget.id === "drop-zone") {
    var input = $(this).find('input[type="file"]');
    var h = false;
    if ($(input).is(":visible")) {
      input.hide();
    } else {
      input.show();
      h = true;
    }
    console.log("You clicking, the #drop-zone, input.visible =>", h);
  } else { 
    console.log("You clicking the input.");
  }
})
$('body').mousemove(function(evt){
    x_m = evt.pageX;
    y_m = evt.pageY;
});

#drop-zone {
  height: 40px;
  width: 250px;
  background-color: #8b5fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
  <input type="file" style="display: none; background: green;" multiple="multiple">
</div>

如何忽略jQuery中子元素的点击侦听？

2 个答案: