Question

我写了以下法典:

<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>

它创建了两个影子根基,并建立了<条码>id=“影子-影子”指定活动听众<条码>。

如果我把我的 cur放在<代码>id=“node-text”上,然后将其移至id=“host-shadow。我赢得了活动听众的号召。但是,如果我采用合成方法这样做,那么我就获得召回。我!!

Look at the spec:

如果目标不相关具体目标或具体目标是活动的相关内容具体目标:

If this condition passing examination, then you getting your callback invocation, otherwise you won t.

由于我可以比较的是非神论职业和合成职业,因此,这些职业不会通过考试。为什么合成职业发包和叫??

My question: what actually do this condition that I specify above?

Answer 1

您似乎假定你可以制定<代码>。活动 s relatedTarget,方法是在标的上设定一个名称的财产。这并不是这项工作的。 The relatedTarget in You quote of the specs is an Internal property of the case, and it s not exposure to JS. 目前,它就象这样说,但明天可能改名为另一个名字,不会造成任何后果,因为它没有暴露。

为使财产具有影响力,它必须作为界面的一组人暴露。目前,>接口仅暴露cancelBubble和returnValue等特性。所有其他属性均为。您可再设定几个特性,如, 类型,.bubbles ,.cancelable和.composed。通过施工人电话和电话dissignEvent(>)将确定.target/code>和.timestamp one,但 relatingTarget 只是不在本清单中,你无法确定。

如今,。可通过https://w3c.github.io/uievents/#idl-mousetinit” rel=“nofollow noreferer” ,通过的全名财产加以确定。因此,<代码>MosueEvent,你可以实际确定。

将这种说法与你试图做的事情相提,不会被叫回,因为“retargeting 活动-related Target against target (我们击中algo的第三颗子弹,因此返回<代码>A,直接target,但活动与Target有关。 (我们已经确定)不是<代码>target。

<div></div>
<script>
setTimeout(() => {
  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];

  // Use the MouseEvent interface to set relatedTarget
  let ev = new MouseEvent("mouseover", { relatedTarget });
  // Won t fire
  target.addEventListener("mouseover", (e) => console.log(e.target, e.relatedTarget));
  target.dispatchEvent(ev);
  console.log("Event dispatched");
});
</script>

友情链接