Javascript传递onclick on child to parent

Question

我有div（.upload-drop-zone，屏幕截图为黄色区域），里面有另一个div（.dropzone-width，蓝色区域）。

<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。：抱歉英语不好。

Answer 1

试试这个，之前我遇到过同样的问题。不需要javscript ......

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

Answer 2

一种可能性是合成地触发click事件。见How can I trigger a JavaScript event click

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

Answer 3

您可以在内部div中侦听单击并触发外部div上的单击。

＆＃13;

＆＃13;

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


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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 4

通过jquery尝试：

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