Javascript pass onclick on child to parent

Question

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>

uploader

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.

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.: Sorry for bad english.

@JuanMendes It does not matter, Internet Explorer 10+, for example. — kopaty4, Mar 24 '15 at 15:52

score 24 · Answer 1 · answered Oct 12 '15 at 07:52

24

Try this, I had a same issue before. No javscript required...

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

answered Oct 12 '15 at 07:52

iDreams Chandrashekhar

241
2
3

1

No Javascript ya! Thank you! – Nick Timmer Mar 12 '18 at 19:13

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

One possibility is to synthetically fire the click event. See How can I trigger a JavaScript event click

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

edited May 23 '17 at 12:33

Community

1
1

answered Mar 24 '15 at 15:52

Juan Mendes

85,853
29
146
204

chiapa · Accepted Answer · 2015-03-24T16:01:41.287

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>

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.

Note that this works only if the event handler was set using jQuery, for an implementation that works no matter how the event handler was registered, see http://stackoverflow.com/a/29237191/227299 — Juan Mendes, Mar 24 '15 at 16:11

score 1 · Answer 4 · answered Mar 24 '15 at 15:57

1

Try this via jquery:

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

answered Mar 24 '15 at 15:57

hamed

7,681
13
50
104

Javascript pass onclick on child to parent

4 Answers4

Linked