相关疑难解决方法(0)

文件partial.html看起来像这样: <button id="test">Hi I am from a partial!</button>

Partial.html动态地包含在页面上,使用XMLHttpRequest:

var oReq = new XMLHttpRequest();
oReq.open('get', 'partial.html', true);
oReq.send();
oReq.onload = function(){
        document.querySelector('#pageArea').innerHTML = this.response;
    }
}

如何添加一个将应用于将来exisiting的事件侦听器,#test 而不是在内容加载并插入后执行#pageArea？

(请不要使用jQuery解决方案!)

在定期单击子项时div,以下代码将打印div单击的特定子项的ID .

<div id="parent">
  <div id="A" class="child"></div>
  <div id="B" class="child"></div>
</div>

<script>
  $("#parent").on('click', event => {
     $(event.target).text(event.target.id)
  })
</script>

但是,如果单击一个子项div并在另一个子项中拖动/释放,div则它将打印父元素的ID.

将单击处理程序分配给子项时不会发生这种情况.

$(".child").on('click', event => {
    $(event.target).text(event.target.id)
})

为什么导致事件目标的拖动操作是第一个示例中的父元素？

http://jsfiddle.net/thz1esfc/

澄清为什么不重复什么是事件冒泡和捕获？:

我理解事件冒泡和捕获与"为什么"相关,但只是声明它是事件冒泡或捕获不能解释方案.这并不能解释为什么在子元素的mousedown和子元素B鼠标松开将造成父元素是event.target不是子元素的点击启动或子元素B中点击被释放的位置.

这两个似乎试图解释结果,但我想有一些文档显示这种行为,如果可能的话.

从技术上讲,浏览器在父b/c上注册CLICK既不是第一个也不是第二个没有注册完成CLICK(意思是mousedown和mouseup)

由浏览器来处理这种行为.至少在Firefox上,当您在一个框中单击时,单击事件将丢失,并拖动到另一个框并释放.

我有一个SVG,其中有更多SVG,其中包含可变数量的rect元素,所有这些都是从数据对象生成的.这是一般的层次结构:

<svg class="parent-svg">
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
</svg>

我已经将mouseenter/mouseleave事件绑定到.child-svg元素上,但是当我的鼠标转到<rect>元素之间的空白时,我发现事件正在触发.我对mouseenter/mouseleave的理解是,当光标进入/离开子元素时,它们不应该触发 - 这看起来像是鼠标悬停/鼠标移动所期望的行为.当然,我理想的是,当我离开每个部分(我已经使用颜色描绘)时,mouseenter/mouseleave事件才会触发.

这是相关的小提琴:http://jsfiddle.net/ysim/yVfuK/4/

编辑:我尝试给.child-svg元素一个高度和宽度,但这似乎也不起作用:http://jsfiddle.net/ysim/gMXuU/3

编辑:这是解决方案的小提琴,根据@ pornel的建议修正:http://jsfiddle.net/ysim/HUHAQ/

谢谢!

我有一个长矩形div(父),里面有几个较小的div(child).我想单击长矩形div(包括子div)上的任意位置以显示父div左侧的偏移量.

目前这个javascript代码仅在我点击小div之外时才有效,只要我在子div中单击,它就会显示子div的偏移量.我是javascript的新手,似乎无法找到相关的答案.

我希望有人可以提前帮助,谢谢.

window.onload = function(){
    parentDiv.addEventListener('click',function(e){
        alert(e.offsetX);
}, false);

我希望窗口仅在pop_up单击时关闭(而不是单击div内容).例如,单击背景图层会隐藏div.在下面的代码中,我不希望它#pop_up仅在"pop_up"上单击div内容bot时关闭.

我怎样才能做到这一点？

$("#pop_up").click(function() {
    $("#pop_up").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pop_up">
  <div id="pop_up_content">
    <h1> world </h1>
  </div>
</div>

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

我刚刚了解到，在 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();};

我需要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 …

我正在尝试在单击标签文本时运行某些功能,但是单击事件已触发两次.
HTML

<label class="label_one">
    Label One
    <input type="checkbox"/>
</label>

但如果我改变这样的html代码,它就不会发生.

<label for="test" class="label_two">
    Label Two
    <input type="checkbox"/>
</label>

我的脚本是这样的:

$('.label_one').click(function(){
    console.log('testing');
});

任何人都可以解释为什么会发生这种情况.
我的jsfiddle在这里检查一下.
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/