HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMのキャンセル可能なイベントプロパティ

JavaScriptはこれらのイベントに反応できるため、HTMLDOMのキャンセル可能なイベントプロパティはHTMLイベントに関連付けられています。キャンセル可能なイベントプロパティは、イベントをキャンセルできるかどうかを示すブール値のtrueまたはfalseを返します。

構文

キャンセル可能なイベントプロパティの構文は次のとおりです-

event.cancelable

例

キャンセル可能なイベントプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<p>Hover over the button below to find out if onmouseover is cancellable event or not</p>
<button onmouseover="cancelFunction(event)">CLICK IT</button>
<p id="Sample"></p>
<script>
   function cancelFunction(event) {
      var x = event.cancelable;
      if(x==true)
         document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
      else
         document.getElementById("Sample").innerHTML = "The onmouseover event is not
      cancellable";

   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMのキャンセル可能なイベントプロパティ

CLICKITボタンにカーソルを合わせると-

HTMLDOMのキャンセル可能なイベントプロパティ

最初に、マウスホバーでommouseoverイベントオブジェクトをcancelFunction（event）メソッドに渡すボタンCLICKITを作成しました。

<button onmouseover="cancelFunction(event)">CLICK IT</button>

cancelFunction（event）メソッドは、渡されたイベントオブジェクトのevent.cancelable値をチェックし、それを変数xに割り当てます。条件ステートメントを使用して、event.cancellableがtrueまたはfalseを返したかどうかを確認し、idが「Sample」-

である段落タグに適切なメッセージを表示します。 
function cancelFunction(event) {
   var x = event.cancelable;
   if(x==true)
      document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
   else
      document.getElementById("Sample").innerHTML = "The onmouseover event is not cancellable";
}

  1. HTML DOMTouchEventtouchsプロパティ

    HTML DOM TouchEvent touchesプロパティは、タッチサーフェスでトリガーされたすべての接触点のリストに対応するTouchListオブジェクトを返します。 注：タッチが指定されたノードまたはその子ノードのいずれかでトリガーされた場合、同じノードでトリガーされていなくても、次のタッチがカウントされます。 以下は構文です- TouchListオブジェクトを返す event.touches 注：モバイルまたはタッチアクセスのあるシステムでアクセスされるオンラインHTMLエディターでタッチイベントの例を実行しました。これは、画面を2秒間タッチするなどのタッチ操作を実行できる

  2. HTMLDOMイベントタイププロパティ

    HTML DOMイベントタイププロパティは、クリック、キープレス、ロード、タッチエンドなどのイベントのタイプに対応する文字列を返します。 以下は構文です- トランジションが実行された秒数を返す- event.type イベントタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Event type</title> <style>    form {       width:70%;