'How to not get an input for a button that has a button over it?

So I'm making an Idle Game and I want the 'buy buttons' (to buy a building) to also have a sell button, which inside the first button. (FYI the buttons are DIVs that act as buttons).

I've stage my code like this:

HTML:

<div id="buyShop">
    <span>Buy a shop</span>
    <div id="sellShop">Sell</div>
</div>

In short I want clicking/mouseover on #sellShop to not trigger an event on #buyShop .

javascripthtmlbuttonparent


Solution 1:[1]

You're putting them both in the same div, which causes event rippling, you shouldn't nest the divs for this. Change your code to something like this for it to work better(I changed some of the code so both divs are the same with different text)

<div id="buyShop">
    <span>Buy a shop</span>
</div>
 <div id="sellShop">
 <span>Sell a shop</span>
 </div>

Solution 2:[2]

It would appear that nesting your buttons is the root of your problem.

You would be better to do something like:

<div id="buyShop">
    <span>Buy a shop</span>
</div>

<div id="sellShop">
    <span>Sell a shop</span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SomeOneOnEarthWhoLives
Solution 2 Lee Taylor

Related Questions