Home/ Questions/Q 7529171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T04:35:17+00:00

let’s suppose to have following code: <body style=overflow: hidden> <div class=wall> <button>New</button> <div class=prova>

  • 0

let’s suppose to have following code:

<body style="overflow: hidden">
    <div class="wall">
        <button>New</button>
        <div class="prova">
            <a href="localhost">ciao !</a>
        </div>
       <div class="prova">
            <a href="localhost">miao !</a>
        </div>
    </div>
</body>

and the following js/jquery code:

function onBoot()
{
    $(".prova").draggable();

    $(".wall").mousedown(onMouseDown);
    $(".wall").mouseup(onMouseUp);
}


function onMouseDown(e)
{
    console.log("down");
}

function onMouseUp(e)
{
    console.log("up");
}


$(onBoot);

Now, I correctly see the button and the two divs.
When I click on “wall” (parent div) I see “down”/”up” on console as I expect.
However, I see “down”/”up” on console also when I click on “prova” divs and button too.
I know about “bubbling up” concept for which an event is forwarded from children to parent elements and I want to prevent it but without specifying an explicit event handler on “prova” divs.
Is it possible ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can check the originators className, like this:

    function onMouseDown(e)
{
  e = e || event;
  if ((e.srcElement || e.target).className === 'wall') {console.log("down");}
  return true;
}

    see this jsfiddle

    • 0