按钮内的可点击div在Firefox上不起作用

Question

I have a expandable section which is a button (this is from a framework that I can not change). And inside this section, I got a clickable div. This is working on Chrome, IE, Safari, but not on Firefox.

 <button onclick="alert('expand');" class="button"> <div onclick="alert('Edit');" class="edit">Edit</div><br/> </button> 

https://jsfiddle.net/dLbkq6uy/1/

I can't fire the click event for the DIV inside this button on Firefox.

Answer 1

In Firefox, the button itself steals events like mouse events and click of the child element. This means things inside buttons cannot be clicked. It is not considered a bug because it works exactly as designed.

Source

Please visit this also

Based on the above links the solution for Firefox is to change the button to some other element like div and manage the functionality and design accordingly.