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

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 .

CodePudding user response：

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>

CodePudding user response：

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>