相关疑难解决方法(0)

可能的重复：
什么是事件冒泡和捕获

我刚刚了解到，在 JS 中我们有两种事件类型：Capture 和 Bubble。eventListener泡泡可以用来避免所有孩子都需要依附；相反，仅将侦听器附加到父级并让它检查目标。听起来很酷。我尝试了这个例子：

<div id="parent-list">
    <span>span1</span>
    <span class='target'>span2</span>
    <span>span3</span>
    <span>span4</span>
</div>

<script type="text/javascript">
document.getElementById('parent-list').addEventListener('click',function(e){
    if( e.target && e.target.nodeName=='SPAN' ){
        var classes = e.target.className.split(' ');
        for(var i=0; i<classes.length; ++i){
            if( classes[i]=='target' ){
                alert('Bingo! you hit the target.');
            }
        }
    }
});
</script>

但我还没有将任何侦听器附加到子跨度上。然而他们身上发生的事件却正在冒泡！那么冒泡是JS中默认的事件顺序吗？那么什么情况下会使用捕获（自上而下）呢？

我读了以下内容:

"如果用户可以与页面上的许多元素进行交互,则向每个元素添加事件侦听器可能会占用大量内存并降低性能......

...因为影响包含元素的事件可以将事件处理程序放在包含元素上,并使用事件目标属性来查找事件发生在哪个子节点上"

那么,在主体上执行一次单击事件然后委派正确的函数有什么缺点呢？

我在这里有一个例子:http://jsfiddle.net/jkg0h99d/3/

死锁的代码备份:

HTML:

<div id="test" class="box">gfdgsfdg </div>
<div id="test2" class="box">gfdsgfdsg</div>
<div id="test3" class="box">fdsgfdsgg</div>
<ul id="test4" class="box">
    <li id="test5" class="box">fsgfdsg</li>
    <li id="test6" class="box">gfdsgfds</li>
    <li id="test7" class="box">gfdsgfds</li>
    <li id="test8" class="box">gfdsgfds</li>
</ul>

JS:

var body = document.body;

if (body.addEventListener) {
    body.addEventListener('click', function (e) {
        delegate(e, "click");
    }, false);
} else {
    body.attachEvent('onclick', function (e) {
        delegate(e, "click");
    }, false);
}


function delegate(e) {
    var sourceNode = e.target || e.srcElement;
    var id = sourceNode.id;
    switch (id) { …

例如，我们有一个带有链接的页面，上面有onclick事件侦听器。但是处理程序使stopPropagation. click如果不再冒泡到root，我该如何处理该事件？

例如

document.addEventListener('click', function(e) {console.log(e);});
a.onclick = function(e) {e.stopPropagation();};

我有一个动态构建的表,最终得到以下代码(带有示例值):

<table id="patientTable" class="display" cellspacing="0" width="100%">
    <thead id="TableHeader">
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody id="tableContent">
        <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
    </tbody>
</table>

我正在尝试使用以下CSS突出显示已经悬停的行:

.clickable :hover {
        background-color: #CCC;
    }

出于某种原因,这会改变" <td>"元素的背景,例如,只会突出显示Value1,Value2或Value3而不是整行.

我试过(无济于事)使用:

.clickable tr:hover {
    background-color: #CCC;
}
.clickable:hover {
    background-color: #CCC;
}
.tr:hover {
    background-color: #CCC;
}
.tr :hover {
    background-color: #CCC;
}

我发现这种不寻常的行为,因为它似乎适用于我见过的每一个其他例子.

值得注意的是:该表是从一个复杂的系统构建的,它基本上执行一个AJAX请求,执行PHP数据库查询,获取值,将它们抛入JSON数组,将它们传递回JS,将数组重新解析为JSON ,循环并创建表,然后输出它.JS会引起这个问题吗？

类名".clickable","row_#"(其中#是一个数字)和表行的ID需要保留,因为它们在将来的函数中使用,并为我提供了一种单独标识每一行的方法.

我需要mouseenter当前div将一些文本附加到div而不是工作好有时显示有时没有这里是小提琴的例子

码:

$(document).ready(function() {

  var thmb_wrap = $('.thm-img');
  var thumb = $('.thm-img img');
  var outer = $('.mn-img');
  var full = $('.mn-img img').length;
  var sc_height = $(outer).height();


  thmb_wrap.one('mouseenter', function() {

    var cur_im = $('.thm-img img').index($(this).children('img')) + 1;
    $(this).append('<span class="numeric">' + cur_im + '/' + (full) + '</span>');

  });

  thmb_wrap.on('mouseenter', function() {
    $(this).children('.numeric').stop().fadeIn(0);
  });

  thmb_wrap.on('mouseout', function() {
    $('.numeric').stop().fadeOut(0);
  });

  $(thumb).mouseenter(function() {

    var images = $('.thm-img img'); // get images

    // move mouseover onto actual images otherwise you won't know …

在外部库的某个地方（当然，我无法更改），以这种方式创建了一个事件侦听器：

someElement.addEventListener('keydown', function(e) {
    whatever();
});

我需要摆脱这个监听器或以某种方式覆盖它。但似乎无法做到，因为我没有任何方法可以引用使用的匿名函数。

这不是唯一被删除的侦听器。卸下所有的keydown听众会也行，如果有可能。

我已经看到一个选项是克隆元素并替换它，但我不能这样做，因为有很多初始化，并且创建了很多其他事件侦听器。我只需要取消那个keydown。

有什么我可以做的吗？

我已经设置了这个菜单.然后,我有方法openMenu,closeMenu和clickMenu.

<li class="nav-item dropdown" 
  v-on:mouseenter="openMenu" 
  v-on:mouseleave="closeMenu" 
  v-on:click="clickMenu">

  <a href="#demo" class="nav-link dropdown-toggle">DEMO</a>
  <ul class="dropdown-menu">
    <li class="dropdown-item"><a href="#">Demo 1</a></li>
    <li class="dropdown-item"><a href="#">Demo 2</a></li>
  </ul>
</li>

当我调查发生了什么时,我注意到点击并将主菜单鼠标按预期工作.但是,似乎子菜单中的锚点也会对点击事件做出反应.我没有在其他地方设置任何听众.实际上,当我删除@click顶部的表单时,子菜单停止注册单击.

所以肯定是爸爸菜单传播甚至听孩子们!太意外了......

然后,我尝试了其他事件.你不知道吗？那些表现完全符合预期.根本没有传播徘徊事件.

这是一个错误吗？如何举报？

(如果它是一个特征,那么它是有史以来最愚蠢的一个.)

我知道这没关系,但我可以打赌我的驴子,像我这样震惊的人会认为它是超级基本的东西,并要求脚本的代码.问题不存在,但由于我是一个如此灵活的人,这里是.

methods: {
  openMenu: (event) => { debugger; },
  closeMenu: (event) => { debugger; },
  clickMenu: (event) => { debugger; }
}

我有一个按钮，在此按钮内是一个非常棒的svg。侦听器仅在按钮上，而不在svg上。但是，当我单击svg时，event.target不是按钮。

但是我只需要按钮作为目标。

这是代码：

const icon = '<svg aria-hidden="true" data-prefix="fas" data-icon="paragraph" class="svg-inline--fa fa-paragraph fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M408 32H177.531C88.948 32 16.045 103.335 16 191.918 15.956 280.321 87.607 352 176 352v104c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h32v344c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h40c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24z"></path></svg>';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(event) {
    event.stopPropagation();
    console.log(event.target);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          <span dangerouslySetInnerHTML={{__html: icon}} />
        </button>
      </div> …

我在拖放方面遇到问题。

我的问题是，当一个元素被放入 dropzone 时，它​​有时会被插入到另一个元素中，而不是 dropzone div 中。

jsFiddle： http: //jsfiddle.net/kMbPF/

在示例中，您可以看到我将表格做得很大，这样就很容易看到这一点。当一个表被拖放到另一个表的顶部时，它不会与其他元素一起进入拖放区，而是被插入到另一个表的内部。

我有几个想法，但我不知道它们是否可行。其中之一是是否可以在放置区上插入一个大的 div，以确保元素始终放入其中。我将其视为几乎透明的层，它捕获元素然后将它们放置在放置区域中。

我的另一个想法是尝试从 div 获取所有数据，将其全部放入一个字符串中，并尝试解析它，然后将所有数据替换回拖放区。

您还会注意到，排序可以工作，但似乎只在 Firefox 中有效，而在 Safari 中则无效。这不是我最紧迫的问题，但如果您确实看到了一个修复程序，那就太好了！（排序仅适用于上部拖放区）我不想使用 jQuery。

代码：

<!DOCTYPE html>\n\n<html lang="en">\n<head>\n    <title>Basic drag and drop example</title>\n\n    <style>\n    @CHARSET "UTF-8";\ntable.draggable-word {\n    background-color: red;\n    padding: 0px;\n    border: 1px solid green;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    border-collapse: collapse;\n    border-spacing: 0;\n    padding: 0;\n    margin: 0;\n    line-height: 1;\n    width: 100%;\n    height:50px;\n}\n\n.drop-div {\n    width: 150px;\n    height: …

我有类似的：

<ul>
<li class="parent">
<div class="child"></div>
</li>
</ul>

我有两个点击触发器。

$(document).on("click", ".parent", function(){
console.dir("parent clicked");
});

$(document).on("click", ".child", function(){
console.dir("child clicked");
});

如果我点击孩子，父母也会被点击！我如何避免这种情况？

http://jsfiddle.net/Vd2GA/