【问题标题】:Why does silencing this keyevent not stop propagation?为什么沉默这个关键事件不会停止传播?
【发布时间】:2011-10-31 19:30:56
【问题描述】:

一个监听器用于输入,另一个用于文档。输入侦听器是 keydown,即文档的按键。首先调用输入事件并将事件静音,但仍会调用文档侦听器!为什么?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test Silence</title>
    </head>
    <body>
        <input type="text" id="test" name="test" />

        <script>
            var docListener = function(event)
            {
                var d = document.createElement( "div" );
                d.textContent = "documentListener";
                document.body.appendChild( d );
            }

            //Add key listener to document
            document.addEventListener( "keypress", docListener, true );

            var inputListener = function(event)
            {
                var d = document.createElement( "div" );
                d.textContent = "inputListener";
                document.body.appendChild( d );

                //Silence event
                event.preventDefault();
                event.stopPropagation();
            }

            //Add key listener to document
            document.getElementById( "test" ).addEventListener( "keydown", inputListener, true );
        </script>
    </body>
</html>

【问题讨论】:

  • 看看 event.srcElement 和 event.target。由于在两个不同的元素上寻找相同的事物,您可能触发了两个不同的事件。
  • 你在什么浏览器中测试这个?我只看到第一个输入事件触发,我认为这是你想要的。这里:jsfiddle.net/namuol/pLJtt
  • Marc B - 嗯,没想到。我如何确定它是否是差异事件? (顺便说一句,srcElement 只在 IE 中)
  • @MarcB - 虽然它可能是不同的事件,但当我也在两个事件处理程序中打印目标时,它并没有显示出来。目标保持不变:inputListener [object HTMLInputElement] documentListener [object HTMLInputElement]。此外,虽然事件可能不同,但如果没有首先触发 keydown 事件,则永远不应触发 keypress 事件(并且它不应该用于我的输入侦听器之后的任何事情,因为我停止了它的传播并将其静音)
  • @namuol 我在 chrome 中测试并遇到了同样的问题。

标签: javascript dom javascript-events


【解决方案1】:

这是两个不同的事件。一个不干扰另一个。如果你想阻止keypress 的冒泡,你必须明确地说出来:

document.getElementById( "test" ).addEventListener( "keypress", inputListener, true );

【讨论】:

  • 如果您查看我的代码,它与您的一模一样!我确实明确停止冒泡,但问题仍然存在。
  • 不,不一样,你听keydown,我设置一个听keypress
猜你喜欢
  • 1970-01-01
  • 2015-02-12
  • 1970-01-01
  • 2021-09-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-23
  • 2011-01-05
相关资源
最近更新 更多