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 26 · Answer 1 · answered Oct 12 '15 at 07:52

26

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

261
3
3

This solution doesn't work for non-pointer click events, such as from Enter or Spacebar when the element is focused. – Merchako Dec 03 '22 at 04:32

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

Ruan Mendes

90,375
31
153
217

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 — Ruan 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,939
15
60
114

Javascript pass onclick on child to parent

4 Answers4

Linked