javascript - 仅对外部 div 触发 mouseup 事件

Question

我在另一组 div 中有一个 HTML 元素(表单元素 - 文本框)。我在外部 div 上创建了 mouseup 事件的监听器，但是当我单击文本框时它会触发。

我认为只有当鼠标悬停在外部 div 上时才会触发，因为我将监听器附加到该元素 - 而不是文本框

有没有办法阻止它在文本框上触发“mouseup”时触发？

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>

Answer 1

当您单击文本框时，事件 "bubbles up"到外部元素。

JavaScript 的 Event.stopPropagation() “防止当前事件在捕获和冒泡阶段进一步传播”。

下面是纯 JavaScript 的示例，但另请参阅 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>

<小时/>

编辑

这是一个 Dojo 示例:

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>