使用指針事件防止程序性點擊

我有這個用戶可以點擊的按鈕，但是在某些情況下，應用程序也會觸發點擊事件。但是，如果應用程序處於脫機狀態，則會將類添加到主體中，並且應該禁用該按鈕。在這種情況下，它看起來像這樣：使用指針事件防止程序性點擊

<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: nonetrigger做一個點擊並忽略pointer-events設置。 DEMO

是否有一些簡單的方法可以解決這個問題，而無需檢查特定樣式/類的DOM元素，還是需要通過我的應用程序傳播離線狀態？

來源

2016-06-09 Jeanluca Scaljeri

我看來像你實現在CSS功能，而你應該做的是，在Javascript或在服務器端。爲什麼不在所有元素上調用'.off（）'來解除事件？ – Midas

我同意w/@Midas，試圖通過CSS來做到這一點絕對是混合外觀和功能。最好在點擊函數中添加一個檢查，以檢查應用是否處於脫機狀態（如果應用可以在不刷新頁面的情況下動態恢復聯機狀態，則更好），或者Midas建議將它們全部解除綁定（如果應用在頁面刷新前一直處於脫機狀態）。 – JeffreyPia

作爲@midas提到的，off應該工作，此代碼將僅禁用點擊僅用於buttonchild的.is-offline。

$(".is-offline button").off("click");

來源

2016-06-09 15:24:41 imvain2

您可以在點擊處理程序中檢查點擊處理程序，如果您的離線或在線做任何需要完成的事情。

我假設需要做些事情，否則爲什麼你會在脫機時觸發點擊事件，而且你不希望按鈕本身是可點擊的。

那麼，這裏是一個例子，希望有所幫助。

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>

來源

2016-06-09 15:39:47 DavidDomain

使用指針事件防止程序性點擊

回答

相關問題