JavaScript将子元素的onclick事件传递给父元素

Question

我有一个

元素（截图中黄色区域），里面还有一个

元素（蓝色区域）。

<div class="upload-drop-zone dz-clickable" id="drop-zone-600">               
    <div class="dropzone-width">600 PX</div>
</div>

与.upload-drop-zone相关联的JavaScript onclick事件（当我单击它时，会显示文件选择器对话框）。该事件是由第三方插件附加的，因此我无法访问所调用的函数。

问题在于，如果我点击.dropzone-width，单击事件没有传递给.upload-drop-zone，因此除了显示文件选择器对话框之外什么都不会发生。我该怎么办才能解决这个问题呢？

P.S：很抱歉我的英语不好。

- kopaty4

---

你需要支持哪些版本的IE浏览器？ - Ruan Mendes

@JuanMendes 不用担心，比如Internet Explorer 10+。 - kopaty4

Answer 1

试试这个，我之前也遇到了同样的问题。不需要 JavaScript...

.dropzone-width {  pointer-events: none; }

- iDreams Chandrashekhar

---

这个解决方案对于非指针点击事件无效，例如当元素聚焦时从Enter或Spacebar触发的事件。 - Merchako

Answer 2

一种可能性是合成触发点击事件。参见如何触发JavaScript的点击事件

fireEvent( document.getElementById('drop-zone-600'), 'click' );

- Ruan Mendes

Answer 3

尝试使用jQuery：

$(".dropzone-width").on("click", function(){
   $("#drop-zone-600").trigger("click");
});

- hamed

Answer 4

你可以监听内部div的点击事件并在外部div上触发点击。

$("#drop-zone-600").click(function (e) {
 alert("hey");   
});


$("#dzw").click(function (e) {
    $("#drop-zone-600").onclick();
});

.upload-drop-zone {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background: darkred;
}

.dropzone-width {
    width: 100px;
    height: 100px;
    border: 1px solid green;
    background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upload-drop-zone dz-clickable" id="drop-zone-600">               
    <div id ="dzw" class="dropzone-width">600 PX</div>
</div>

尽管警报功能位于#drop-zone-600 div的点击事件侦听器内部，但您可以通过单击任何div来查看警报。

- chiapa

---

请注意，这仅适用于使用jQuery设置事件处理程序的情况。如果要实现无论如何注册事件处理程序都能工作的实现，请参见https://dev59.com/VYnca4cB1Zd3GeqP5QlR#29237191。 - Ruan Mendes