JavaScriptでマウスオーバー(イベント伝搬なし)時に処理をしたい時に便利なmouseenter・mouserleaveイベントの使い方

マウスオーバー(ホバー)時のイベントを理解する

マウスが特定の要素の上にある時に実行したい処理がある場合はmouseentermouserleaveイベントを利用します。

1つ注意点ですが、これらのイベントは「イベント伝搬」しません。

イベント伝搬をさせたい場合はmouseovermouseoutイベントを利用します。

イベント

イベント発生条件
mouseenterマウスカーソルがデバイス要素上に乗った時
mouseleaveマウスカーソルがデバイス要素上から離れた時
マウス関連のイベント

サンプルコード

サンプルコードとして、特定要素上にマウスカーソルが乗っているか乗っていないかを判別して文字列を出力するスクリプトを紹介します。

下の枠内にカーソルをゆっくり移動したりしてみてください。

Output

マウスカーソル系イベント発生順(イベント伝搬なし)

    Pug
    #box.w-100.mb-3
    		#inner.w-100.m-4
    	p マウスカーソル系イベント発生順(イベント伝搬なし)
    	ol#targetText
    SCSS
    #box,
    #inner {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	box-sizing: border-box;
    	position: relative;
    }
    #box {
    	background-color: #576574;
    	#inner {
    		background-color: #40739e;
    		height: 100px;
    	}
    }
    JavaScript
    // 操作対象エリア
    const targetText = document.getElementById('targetText');
    const boxArea = document.getElementById('box');
    const innerArea = document.getElementById('inner');
    
    const mouseOption = {
    	capture: true,
    }
    boxArea.addEventListener('mouseenter', () => {
    	mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#box要素にマウスが乗った';
      targetText.appendChild(mouseCursorLog);
    },mouseOption);
    boxArea.addEventListener('mouseleave', () => {
    	mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#box要素からマウスが離れた';
      targetText.appendChild(mouseCursorLog);
    },mouseOption);
    
    innerArea.addEventListener('mouseenter', () => {
      mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#inner要素にマウスが乗った';
      targetText.appendChild(mouseCursorLog);
    },mouseOption);
    innerArea.addEventListener('mouseleave', () => {
      mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#inner要素からマウスが離れた';
    	targetText.appendChild(mouseCursorLog);
    },mouseOption);
    
    
    インストラクター
    コメント

    コメントを残す