Javascript传递onclick on child to parent

Question

我有div(.upload-drop-zone,屏幕截图为黄色区域),里面有另一个div(.dropzone-width,blue zone).

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

有一个javascript onclick事件附加到.upload-drop-zone(当我点击它时,它显示文件选择器对话框).由第三方插件附加的事件,因此我无法访问被调用的函数.

问题是,如果我单击.dropzone-width,则单击事件未传递到.upload-drop-zone,因此没有任何反应,而不是显示文件选择器对话框.我该怎么办才能修复它？

PS:抱歉英文不好.

Answer 1

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

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

Answer 2

您可以监听内部 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-600div 的单击事件侦听器内，但您可以通过单击任何 div 来查看警报。