Question

我在Div中有一个Div，我试图为div保留不同的onClick处理程序，但是当单击内部div时，事件处理程序都执行，内部div首先执行，然后是Oter div，< / p>

我不想实际执行这两个。

代码：

Permission denied @ dir_s_mkdir - /usr/local/ruby (Errno::EACCES)
from /home/username/ruby-2.1.1/lib/fileutils.rb:247:in `fu_mkdir'
from /home/username/ruby-2.1.1/lib/fileutils.rb:224:in `block (2 levels) in mkdir_p'
from /home/username/ruby-2.1.1/lib/fileutils.rb:222:in `reverse_each'
from /home/username/ruby-2.1.1/lib/fileutils.rb:222:in `block in mkdir_p'
from /home/username/ruby-2.1.1/lib/fileutils.rb:208:in `each'
from /home/username/ruby-2.1.1/lib/fileutils.rb:208:in `mkdir_p'
from ./tool/rbinstall.rb:193:in `makedirs'
from ./tool/rbinstall.rb:300:in `prepare'
from ./tool/rbinstall.rb:339:in `block in <main>'
from ./tool/rbinstall.rb:789:in `call'
from ./tool/rbinstall.rb:789:in `block in <main>'
from ./tool/rbinstall.rb:786:in `each'
from ./tool/rbinstall.rb:786:in `<main>'
make: *** [do-install-all] Error 1

Jsfiddle：fiddle

Answer 1

只需在内部event.stopPropagation();的onclick中添加<div>。

像这样：

<div style="width:100%;height:200px;background-color:yellow" onclick="alert('Div A');return false;">
    This is Div A
    <div style="width:20%;height:100px;background-color:red" onclick="event.stopPropagation(); alert('Div B');return false;">
        This is Div B
    </div>
</div>

Answer 2

<div style="width:100%;height:200px;background-color:yellow" onclick=" if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();alert('Div A');return false;">This is Div A
<div style="width:20%;height:100px;background-color:red" onclick=" if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();alert('Div B');return false;"> This is Div B</div>
</div>

在您的onclick功能中添加此代码

 if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

fiddle

详细了解事件捕获和事件冒泡here和here

Answer 3

首先：不要使用内联点击处理程序。这是不安全的，并且内联处理程序在每次激活时都会生成一个新的js-interpreter;
第二：使用某种机制来识别你的div（例如data-id或只是一个id）;
第三：使用event delegation，您只需要一个处理程序和，您不必担心事件捕获/冒泡。

例如：

// append handler to click for anything within the body of your document
document.body.addEventListener('click', reportFromDiv);

// one handler for divs with data-id attribute
function reportFromDiv(evt) {
  var from = evt.target || evt.srcElement;
  // do nothing for elements without the data-id attribute  
  if (!from.getAttribute('data-id')) {
      return true;
  }
  return report(from.getAttribute('data-id'));
}

function report(str) {
   document.querySelector('#report').textContent += 'clicked: ' + str + '\n';
}

<div style="width:100%;height:200px;background-color:yellow" data-id="divA">
 This is Div A
 <div style="width:20%;height:100px;background-color:red" data-id="divB">
  This is Div B
 </div>
</div>
<pre id="report"></pre>

Answer 4

＆＃13;

$(document).ready(function () {
    $(".yellow").click(function () {
        alert("Div A");
    });
    $(".red").click(function (objEvent) {
        objEvent.stopPropagation();
        alert("Div B");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%;height:200px;background-color:yellow" class="yellow">This is Div A
<div style="width:20%;height:100px;background-color:red" class="red"> This is Div B</div>
</div>

＆＃13;

点击按钮＆＃39; div＆＃39; div在一个＆＃39; div里面执行div的事件处理程序

4 个答案: