主页 / 问题 / 983467
Accepted
Дмытрык
Asked:2020-05-20 18:05:57 +0000 UTC2020-05-20 18:05:57 +0000 UTC

event.stopPropagation 的对立面。如何继续冒泡事件？

  • 772

有没有这样的方法？还是您需要创建自己的活动？

UPD
总的来说，我想在 Vue 组件上应用这个技巧，它没有时间处理数据，在点击和打开文件上传窗口之间（接受更改）。
但是，在一些异步操作之后需要解决进一步分发问题的情况下，例如，在服务器响应之后，这可能是必要的......

document.addEventListener('click', ()=>{
  console.log('Клик вспыл до документа')
})
const base = document.getElementById('base');
base.addEventListener("click", (e)=>{
  e.stopPropagation();
  setTimeout(()=>{
// как продолжить всплытие клика?
  })
})
body{
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#base{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}
 <div id="base"></div>

javascript

2 个回答

  1. Best Answer

    覆盖默认选项

    可以通过使用来防止打开文件选择对话框event.preventDefault()。你可以取消一个event.preventDefault()动作event.returnValue = true

    document.querySelector("input").addEventListener("click", async (event) => {
  event.preventDefault();
  event.returnValue = true;
});
    <input type="file">

    returnValue但是，应该记住，如果执行了任何异步操作，那么在其完成后，将无法再使用. 为什么？因为事件很久以前就结束了，handler执行的是异步代码（在执行的时候事件已经不存在了）

    document.querySelector("input").addEventListener("click", async (event) => {
  event.preventDefault();
   
  new Promise((res) => {
    // симулируем асинхронную операцию
    setTimeout(res, 1000);
  }).then(() => {
    console.log("Асинхр. операция завершилась");
    event.returnValue = true;
  });
});
    <input type="file">

    你的选择

    不幸的是，你想象的方式也行不通。原因2：首先 - 没有这样的（标准）方法（1）和（2） - 您仍在尝试与（已通过，已完成）事件异步交互。

    该怎么办？（工作版）

    最有可能的是，在另一个元素上发布自定义事件的选项将起作用（请参阅问题的评论），但是，有一些值得考虑的陷阱（另请参阅那里）。

    我绘制了一个似乎可行的示例（2 秒后打开一个对话框）。

    document.querySelector("#fake").addEventListener("click", async (event) => {
  event.preventDefault();
  
  new Promise((res) => {
    setTimeout(res, 2000);
  }).then(() => {
    document.querySelector("#real").click();
  });
});
    <input type="file" id="fake">
<input type="file" id="real" hidden>

    • 1

  2. 有些事件可以以编程方式重复 - 例如click- 即使通过调用方法，事件也更复杂 - 通过dispatchEvent，但对于某些事件，它不会带来任何好处。

    document.querySelector('section').addEventListener('click', function (e) {
  console.log("Section clicked")
})

~function () {
  var isReplay;

  document.querySelector('div').addEventListener('click', function (e) {
    if (!isReplay) {
      console.log("Div clicked by user")
      e.stopPropagation()
      setTimeout(function () {
        isReplay = true
        e.target.click()
        isReplay = false
      }, 1000)
    }
  })
}()
    <section><div>123</div></section>

    • 1

相关问题