dom-events 相关问题

我写了以下代码：设置超时（（）=> { document.body.innerHTML = "<div></div>"; 让outerHost = document.querySelectorAll("div")[0]; 外部主机。</desc> <question vote="1"> <p>我写了以下代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> setTimeout(() => { document.body.innerHTML = "<div></div>"; let outerHost = document.querySelectorAll("div")[0]; outerHost.attachShadow({mode: "open"}); outerHost.shadowRoot.innerHTML = "<style>div {width: 100px; height: 100px; background-color: red}</style><div></div><div id='host-shadow'></div>"; let target = outerHost.shadowRoot.childNodes[2]; target.attachShadow({mode: "open"}); target.shadowRoot.innerHTML = "<div id='node-text' style='background-color: green'>Hello</div>"; let relatedTarget = target.shadowRoot.childNodes[0]; let ev = new Event("mouseover"); ev.relatedTarget = relatedTarget; target.addEventListener("mouseover", (e) => console.log(e.target, e.relatedTarget)); target.dispatchEvent(ev); }); </script></code></pre> </div> </div> <p></p> <p>它创建两个影子根并指定事件监听器<pre><code>id="host-shadow"</code></pre>。<pre> </pre>如果我将光标放在 </p><code>mouseover</code><p> 上，然后将其移动到 <pre><code>id="node-text"</code></pre>，我将不会调用事件侦听器的回调。但是如果我通过合成方法执行此操作，我会得到回调调用。我被困住了！<pre> </pre>查看</p>规格<p>：<a href="https://dom.spec.whatwg.org/#concept-event-dispatch" rel="nofollow noreferrer"> </a> </p>如果目标不是相关目标或目标是事件的相关目标，则：<blockquote> <p> </p>如果这个条件通过检查，那么你就会得到回调调用，否则你不会。</blockquote> <p>我可以比较非合成调用和合成，它们的调用没有通过检查。为什么合成调用会传递并调用回调？</p> <p></p>我的问题：<p>我上面指定的这个条件实际上是什么？<strong> </strong> </p> </question>您似乎假设可以通过在实例对象上设置具有该名称的属性来设置 <answer tick="false" vote="0"><code>id="host-shadow"</code><p> 的 <pre><code>Event</code></pre> 。事实并非如此。您引用的规范中的 <pre><code>relatedTarget</code></pre> 是实例的内部属性，它不会暴露给 JS。目前它在规范中的名称是这样的，但明天可能会更改为另一个名称，而不会产生任何后果，因为它没有公开。<pre> </pre>要使属性产生影响，需要将其公开为接口上的设置器。目前 </p><p><code>relatedTarget</code><a href="https://dom.spec.whatwg.org/#event" rel="nofollow noreferrer"> 接口<pre> 仅将 </pre><code>Event</code></a> 和 <pre><code>cancelBubble</code></pre> 属性公开为可设置。所有其他属性都是<pre>readonly</pre>。你可以通过构造函数调用设置更多一些属性，如<em><code>returnValue</code></em>、<pre><code>.type</code></pre>、<pre><code>.bubbles</code></pre>和<pre><code>.cancelable</code></pre>，对<pre><code>.composed</code></pre>的调用将确定<pre><code>dispatchEvent()</code></pre>和<pre><code>.target</code></pre>其中之一，但是<pre><code>.timestamp</code> </pre> 根本不属于此列表，您无法对其进行设置。<pre> </pre>现在，</p><p><code>relatedTarget</code><a href="https://w3c.github.io/uievents/#dom-mouseevent-relatedtarget" rel="nofollow noreferrer">接口<pre>确实通过</pre>readonly</a><pre><code>MouseEvent</code></pre>属性暴露了其内部<em><code>relatedTarget</code></em>，并且它允许通过<pre>MouseEventInit字典</pre>的同名属性来设置它。所以对于<a href="https://w3c.github.io/uievents/#idl-mouseeventinit" rel="nofollow noreferrer"><code>.relatedTarget</code></a>，你实际上可以设置它。<pre> </pre>将其设置为您尝试执行的操作，回调将不会被调用，因为“</p>retargeting<p>事件的<a href="https://dom.spec.whatwg.org/#retarget" rel="nofollow noreferrer"><code>MosueEvent</code></a>针对<pre><code>relatedTarget</code></pre>的结果”将是<pre><code>target</code></pre>（我们击中了算法中的第三个子弹，因此直接返回<pre><code>target</code></pre>，即<pre><code>A</code></pre>），但事件的<pre><code>target</code></pre>（我们设置的）不是<pre><code>relatedTarget</code></pre>。<pre> </pre></p><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"><code>target</code><div> <pre> </pre> </div></div> <p> </p></answer>

javascript html dom dom-events shadow-dom

回答 0 投票 0

如何在浏览器中处理三星S-Pen按钮事件（Javascript）？

我正在为 Galaxy Tab S3 开发一个网络应用程序，允许用户使用三星 S-Pen 进行绘画。 S-Pen 侧面有一个按钮，我知道原生 Android 应用程序可以使用该按钮来执行操作

javascript web-applications dom-events galaxy-tab stylus-pen

回答 1 投票 0

Javascript 滚动处理程序未触发

我想做的就是在滚动 DIV 时调用一个函数。为了简单起见，我没有指定任何其他内容。另外，我只关注 DOM 兼容的浏览器，如 Chrome、Safari（不是 IE）....

javascript event-handling dom-events

回答 6 投票 0

音频播放在React js中不起作用，并且在导入音频文件时出现错误

当尝试运行我的这段代码时，音频文件未播放。后来我尝试了...