トップ ブログトップ [Vue.js]Firefoxでselect要素が親のleaveを発火する問題
airline_seat_individual_suite やますぎ ne290045
[Vue.js]Firefoxでselect要素が親のleaveを発火する問題

[Vue.js] Firefoxで<select>要素をクリック時に親要素のmouseleaveイベントを発火させない 」というタイトルを設定しようとしたら長すぎて怒られました。


ある要素の@mouseleaveイベントを設定している場合、その要素が内包している<select>要素をクリックした時(≒その<option>要素に触れた時)、通常はmouseleaveが発火してほしくないと思います。

実際、Chromeなどのブラウザでは<select>タグを押しても(カーソルが<option>要素に移動しても)親要素のmouseleaveは発火しないのですが、Firefoxだけ発火してしまうという問題があります。

解決方法

Firefoxの<select>のクリックによる親要素のmouseleave発火時は、event.relatedTargetプロパティがnullになるので、それを判定してあげてreturnしてしまえばよいです。

下の例では、親要素に@mouseleave="eventName"のようなイベント指定があると仮定し、methods内のeventNameメソッドでeventを取得して判定をしています。

eventName: function(event) {
  if (event.relatedTarget === null) return;
  this.hogehoge()
}

上では、Vue.jsでの書き方を載せましたが、同じ判定方法を使えばVue以外の環境でもmouseleaveの発火を防ぐことができると思います。

airline_seat_individual_suite やますぎ ne290045