Javascript将子代的onclick传递给父代 [英] Javascript pass onclick on child to parent

问题描述

我有一个div(屏幕快照中的.upload-drop-zone，黄色区域)，另一个是div(.dropzone-width，蓝色区域).

I have div (.upload-drop-zone, yellow zone at screenshot) with another div (.dropzone-width, blue zone) inside.

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

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

There is a javascript onclick event attached to .upload-drop-zone (when I click on it, it shows file chooser dialog). Event attached by third-party plugin, so I have no access to function which be called.

问题是，如果我单击.dropzone-width，则click事件没有传递到.upload-drop-zone，因此什么也没有发生，而是显示了文件选择器对话框.我该如何解决?

The problem is that if I make click on .dropzone-width, click event did not pass to .upload-drop-zone so nothing happens instead of showing file chooser dialog. What can I do to fix it?

P.S .:对不起，英语不好.

P.S.: Sorry for bad english.

推荐答案

您可以在内部div上监听一下点击，然后在外部div上点击一下.

You can listen for a click in the inner div and fire the click on the outer 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的click事件侦听器内部，您仍可以通过单击任意div来查看警报.

Despite the fact that the alert function is inside the click event listener of the #drop-zone-600 div, you can see the alert by clicking any of the divs.

这篇关于Javascript将子代的onclick传递给父代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！