Fire mouseup event only for outer div

Question

I have an HTML element (form element - textbox) inside another series of divs. I created listener for mouseup event on the outer div, but it fires when I click on the textbox.

I thought it would only fire when mouseup on the outer div since I attached the listener to that element - not to the textbox

Is there a way to prevent it from firing when 'mouseup' fires on the textbox?

require([
    "dijit/form/TextBox",
    "dojo/on",
    "dojo/dom"
], function (
TextBox,
on,
dom) {
    var box = new TextBox({
        name: "any",
        value: "",
        placeholder: "Type anything here"
    }, "textBox");
    
    var canvas = dom.byId("outerDiv");
    on(canvas, "mouseup", function (e) {
    alert();
    });
});
dojo.require("dijit.form.anyText");
 var textBox = dijit.byId("textBox");
   console.log( "--- >> "+textBox.get("value"));

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<Div id="outerDiv" style="width: 3in; height: 3in; border: 1px solid;border-color:black; cursor: pointer;">
  <Div id="innerDiv" style="height: auto; border: 1px solid;border-color:blue;">
    <div  id="textBox" readonly></div>
  </Div>
</Div>

Instead on trying to prevent the event, I would check in the event is fired on the element where the listener is assigned: `if(event.target === event.currentTarget){...}` — Florent B., Oct 03 '17 at 18:46
@FlorentB. Sounds good. You might consider posting an answer making that argument. — showdev, Oct 03 '17 at 18:56

showdev · Answer 1 · 2017-10-03T19:02:41.820

When you click the text box, the event "bubbles up" to the outer elements.

JavaScript's Event.stopPropagation() "prevents further propagation of the current event in the capturing and bubbling phases".

Below is an example in pure JavaScript, but see also dojo.stopEvent.

var outerDiv = document.getElementById('outerDiv');
var textBox = document.getElementById('textBox');

outerDiv.addEventListener('mouseup', function(event) {
  console.log('mouse up on outer div');
});
textBox.addEventListener('mouseup', function(event) {
  event.stopPropagation();
  console.log('mouse up on text box');
});

#outerDiv {
  width: 3in;
  height: 3in;
  border: 1px solid;
  border-color: black;
  cursor: pointer;
}

#innerDiv {
  height: auto;
  border: 1px solid;
  border-color: blue;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<Div id="outerDiv">
  <Div id="innerDiv">
    <div id="textBox" readonly>textbox</div>
  </Div>
</Div>

Edit

Here's a Dojo example:

require([
  "dijit/form/TextBox",
  "dojo/on",
  "dojo/dom"
], function(
  TextBox,
  on,
  dom) {

  var box = new TextBox({
    name: "any",
    value: "",
    placeholder: "Type anything here"
  }, "textBox");

  var canvas = dom.byId("outerDiv");

  on(box, "mouseup", function(e) {
    console.log('mouse up on text box');
    dojo.stopEvent(e);
  });

  on(canvas, "mouseup", function(e) {
    console.log('mouse up on outer div');
  });

});

#outerDiv {
  width: 3in;
  height: 3in;
  border: 1px solid;
  border-color: black;
  cursor: pointer;
}

#innerDiv {
  height: auto;
  border: 1px solid;
  border-color: blue;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<Div id="outerDiv">
  <Div id="innerDiv">
    <div id="textBox" readonly>textbox</div>
  </Div>
</Div>

That depends. Here's an informative article about [event order](https://www.quirksmode.org/js/events_order.html). Also see [event flow](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow) and [Bubbling and Capturing](https://javascript.info/bubbling-and-capturing). — showdev, Oct 03 '17 at 19:41
I'm definitely not a Dojo expert, but according to [this post](https://stackoverflow.com/questions/11340194/dojo-on-and-the-capture-phase), Dojo "not appear to support event listeners for the capture phase". So in this context, I'd say yes: the event fires first on the child and then bubbles up the DOM. — showdev, Oct 03 '17 at 19:48

score 0 · Answer 2 · answered Oct 03 '17 at 18:44

0

You can check the id before creating the alert

on(canvas, "mouseup", function (e) {
    if (e.target.id == "outerDiv") {
       alert();
    }
});

JS Fiddle

answered Oct 03 '17 at 18:44

andrewgi

620
1
7
22

Fire mouseup event only for outer div

2 Answers2

Edit