CODEWITHSUNDEEP
javascripthtml
kopaty4
kopaty4

Reputation: 2296

Javascript pass onclick on child to parent

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.

Upvotes: 6

Views: 12228

Answers (4)

iDreams Chandrashekhar
iDreams Chandrashekhar

Reputation: 271

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

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

Upvotes: 27

chiapa
chiapa

Reputation: 4412

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.

Upvotes: 1

hamed
hamed

Reputation: 8033

Try this via jquery:

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

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92284

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' );

Upvotes: 1

Related Questions