Svelte防止用户在MAPBOX上输入

发布于 2025-01-31 10:29:51 字数 615 浏览 3 评论 0原文

当cssdisableUserInput是true时，我正在尝试阻止用户输入。

因此，基本上，在我的主标签中，我拥有这样的：

<div id=userinput disabled={cssDisableUserinput}>
    <div id="map">
</div>

在我的CSS中，我有：

<style>
  #map {
    width: 1300px;
    height: 800px;  
  }
  #userinput{
    width: 1300px;
    height: 800px; 
    pointer-events: none;
  }
</style>

但是，即使cssdisableuserinput是false，它也完全阻止用户输入。

阻止用户输入的更好方法是什么？

原文

I am attempting to block user input when cssDisableUserInput is true.

So basically within my main tags I have this:

<div id=userinput disabled={cssDisableUserinput}>
    <div id="map">
</div>

within my CSS I have:

<style>
  #map {
    width: 1300px;
    height: 800px;  
  }
  #userinput{
    width: 1300px;
    height: 800px; 
    pointer-events: none;
  }
</style>

And yet it completely blocks user input even when cssDisableUserinput is false.

What is a better approach to blocking user input?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冬天旳寂寞 2025-02-07 10:29:52

防止交互的事物是指针事件：无;，而不是disabled。您不能禁用div。您可能需要将该属性提取到单独的类中，并使用cssdisableuserinput flag有条件地应用该属性。

<div class:disable-events={cssDisableUserinput}>...</div>

<style>
  .disable-events { pointer-events: none; }
</style>

（我不知道Mapbox API，也许有一种内置机制更适合实现这一目标。上面的方法仍然可以通过键盘进行交互。）

The thing that prevents interaction is pointer-events: none;, not disabled. You cannot disable a div. You might want to extract that property into a separate class and apply that conditionally using your cssDisableUserinput flag.

<div class:disable-events={cssDisableUserinput}>...</div>

<style>
  .disable-events { pointer-events: none; }
</style>

(I do not know the Mapbox API, maybe there is a built-in mechanism that would be better suited for achieving this. The above approach may still allow interaction via the keyboard.)

回复收藏 0 原文

~没有更多了~