There is a menu

<li class="menu" id="2" onmousedown="selectProductsOnCategory(this)"> <a href="#" >плуги</a> <ul> <li class="menu" id="3" onclick="selectProductsOnCategory(this)"> <a href="#">Оборотные плуги</a> </li> <li class="menu" id="4" onclick="selectProductsOnCategory(this)"> <a href="#">Загонные плуги</a> </li> </ul> </li>

And there is a script

 function selectProductsOnCategory(e) { console.log(e); }

Why when you click on the plows does е return 1 element that is pressed (as needed). And when you click on reversible plows or pens, it returns 2 elements (the one on which the parent (plows) was pressed). And how to make that he would return 1 item?

    1 answer 1

    When you click on the "plows," onmousedown="selectProductsOnCategory(this)" " is triggered, and when you click on the "Reversible plows" or "Rack plows," onclick="selectProductsOnCategory(this)" and onmousedown="selectProductsOnCategory(this)" , so -as click on the nested element is considered and click on the parent. To prevent this, use event.stopPropagation();

    • @Miki sorry, but doesn't it just work with jQuery? because inserting the event.stopPropagation () function in the beginning; nothing changed - ItsMyLife
    • You need to insert e.stopPropagation(); into your function e.stopPropagation(); It will look like this: `function selectProductsOnCategory (e) {e.stopPropagation (); console.log (e); } ` - Mikl
    • ps and in js stopPropagation () is also without jquery - Mikl
    • @Miki maybe I'm stupid, but doing so e.stopPropagation(); yields `Uncaught TypeError: e.stopPropagation is not a function` - ItsMyLife
    • @ItsMyLife, this is because you call the selectProductsOnCategory (this) function - and this in this case will be the li element, and it does not have a stopPropagation method - Grundy