Javascript 如何在jQuery中忽略对子元素的单击监听？

我有一个元素的简单div：

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

---

主要的问题是，当我在父元素上手动单击触发侦听器时，我得到了无休止的单击循环。

通过检查

目标的
id
，确保单击的元素是
放置区。当
jQuery
模拟一个事件时，它将传递相同的
此
引用，但不会传递该事件，因此只需检查是否设置了该事件


$（“#放置区”）。单击（功能（事件）{
if（this.id==“drop zone”&&event.originalEvent）{
$（“#拖放区>输入”）。触发（“单击”）；
}
})
#下降区{
背景色：红色；
高度：50px；
宽度：50px；
}
通过检查
目标的
id
，确保单击的元素是
放置区。当
jQuery
模拟一个事件时，它将传递相同的
此
引用，但不会传递该事件，因此只需检查是否设置了该事件


$（“#放置区”）。单击（功能（事件）{
if（this.id==“drop zone”&&event.originalEvent）{
$（“#拖放区>输入”）。触发（“单击”）；
}
})
#下降区{
背景色：红色；
高度：50px；
宽度：50px；
}
也许这就是你想要的：


var x_m=0；
var y_m=0；
$（“#放置区”）。单击（函数（事件）{
var mtarget=document.elementFromPoint（x\m，y\m）；
如果（mtarget.id==“放置区域”）{
var input=$（this.find（'input[type=“file”]”）；
var h=假；
如果（$（输入）.is（“：可见”））{
input.hide（）；
}否则{
input.show（）；
h=真；
}
log（“单击，#拖放区，input.visible=>”，h）；
}否则{
log（“您正在单击输入”）；
}
})
$（'body'）.mousemove（函数（evt）{
x_m=evt.pageX；
y_m=evt.pageY；
});
#下降区{
高度：40px；
宽度：250px；
背景色：#8b5fff；
}
也许这就是你想要的：


var x_m=0；
var y_m=0；
$（“#放置区”）。单击（函数（事件）{
var mtarget=document.elementFromPoint（x\m，y\m）；
如果（mtarget.id==“放置区域”）{
var input=$（this.find（'input[type=“file”]”）；
var h=假；
如果（$（输入）.is（“：可见”））{
input.hide（）；
}否则{
input.show（）；
h=真；
}
log（“单击，#拖放区，input.visible=>”，h）；
}否则{
log（“您正在单击输入”）；
}
})
$（'body'）.mousemove（函数（evt）{
x_m=evt.pageX；
y_m=evt.pageY；
});
#下降区{
高度：40px；
宽度：250px；
背景色：#8b5fff；
}

jQuery（this.find（'input[type=“file”]）。trigger（'click'）jQuery（this）.find（'input[type=“file”]”）。trigger（'click'）触发父级
jQuery('#drop-zone:not(input)').click(function() {
    jQuery(this).find('input[type="file"]').trigger('click')
})