Question

我有一个用户可以点击的按钮，但在某些情况下，应用程序也会触发点击事件。但是，如果应用程序处于脱机状态，则会将一个类添加到正文中，并且应禁用该按钮。在这种情况下，它看起来像这样：

<body class="is-offline">
    <button>Click me</button>
    <script>
        $('button').click(function () {
            ...
        });
    </script>
</body>

使用以下css

.is-offline button {
    ...
    pointer-events: none;
}

到目前为止它仍然有效，但正如我所提到的，应用程序也可以触发点击

$('button').trigger('click');

使用pointer-events: none，trigger会点击并忽略pointer-events设置。 DEMO

是否有一些简单的方法来解决这个问题，而不需要检查特定样式/类的DOM元素，或者需要通过我的应用程序传播脱机状态？

Answer 1

正如@midas所述，off应该有效，此代码将仅禁用button的{{1}} child点击次数。

.is-offline

Answer 2

您可以在点击处理程序内部检查您的离线或在线并执行需要完成的任务。

我假设需要做一些事情，否则为什么你会在离线时触发点击事件而你不希望按钮本身是可点击的。

嗯，这是一个例子，希望有所帮助。

setTimeout(function() {
  $('button').trigger("click");
}, 2000);

$('button').on("click", function () {
  var task =  {
    "online": function() {
      alert('is online');
    },
    "offline": function() {
      alert('is offline');
    }
  };
  ($(this).hasClass("is-offline")) ? task.offline() : task.online();
});

button.is-offline {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button class="is-offline">Press me</button>

使用指针事件阻止程序化点击

2 个答案: