尽管事件不可取消， preventDefault() 仍然有效

问题描述

在以下代码中，我将事件设置为不可取消。但是，preventDefault() 仍会阻止复选框切换。请告诉我如何使 preventDefault() 在不从代码中删除它的情况下不起作用。

import React,{ Component,useEffect } from "react";
import { render } from "react-dom";

const App = props => {
  useEffect(() => {
    let btn = document.querySelector("#myCheckBox");
    console.log(btn instanceof Element);

    const clickEventListener = event => {
      console.log("button clicked");
      event.preventDefault(); // Though the event is non-cancelable,preventDefault() works
    };

    btn.addEventListener("click",clickEventListener);

    let buttonClickEvent = new MouseEvent("click",{
      bubbles: false,cancelable: false // It is non-cancelable
    });

    btn.dispatchEvent(buttonClickEvent);
  },[]);

  return (
    <div>
      <input type="checkBox" id="myCheckBox" />
    </div>
  );
};

render(<App />,document.getElementById("root"));

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）