こんにちは、シェンディです
機能概要
タッチすると CSS のホバーがトリガーされ、コンピューター側ではマウスがタッチされ、モバイル側では指がタッチされます。
ホバーをトリガーする要素やアニメーション効果をトリガーする他の要素など、CSS だけでは一部の効果を実現できない場合があるため、JS を使用する必要があります。
実装
JS は CSS のホバー効果をシミュレートしたいので、マウスの開始イベントと終了イベントを使用できます。
このようなイベントには 2 つのタイプがあり、1 つは現在の要素に対してのみ有効で、もう 1 つは現在の要素と現在の要素のサブ要素にも有効です。
var div = document.getELementById("div");
// enter是进入触发,leave移出触发,对子元素不生效,模拟hover使用这种
div.onmouseenter = function () {
};
div.onmouseleave = function () {
};
// over是进入触发,out是移出触发,对子元素也生效
div.onmouseover = function () {
};
div.onmouseout = function () {
};
上記の方法では、jsを使用してコンピュータ側でCSSのホバー効果をシミュレートできますが、モバイル側ではまだ少し問題があります
モバイル端末上の CSS ホバー効果は、指で短くタッチするだけでトリガーできます。トリガーするには、上記の方法を長押しする必要があります。
タッチ機能が使えるようになります（モバイル側のみ）
var div = document.getELementById("div");
// start按下触发,end抬起触发
div.ontouchstart = function () {
};
div.ontouchend = function () {
};
上記の 2 つの方法では、モバイル端末上でのホバーと同じ効果はまだ得られません。ホバーはモバイル端末上で押された後にトリガーされ、その後持ち上げてもホバーはキャンセルされません。他の要素をクリックするだけで現在のホバーがキャンセルされます
したがって、任意の要素が押された後にリリースするには、タッチスタートのみを使用できます
現在の要素のイベントが最初に実行され、その後他のイベントが実行されるため、優先順位を考慮する必要があります
コードは以下のように表示されます
var div = document.getELementById("div");
// 当前触发的元素,用于解决先后执行的问题
var curEle;
div.ontouchstart = function() {
curEle = this;
};
// 任意元素按下解除hover
document.ontouchstart = function () {
// 这里是解除hover部分
// ...
if (curEle) {
// 这里是显示触摸的hover部分
// ...
// 最后将这一次触摸的元素置空,避免元素无法解除hover
curEle = null;
}
};
最後に、コードの 2 つの部分を統合すると、js を使用して、コンピューター側とモバイル側で CSS のホバー効果を実現できます。
まだ小さな問題があります.たとえば、モバイル端末上でホバーをトリガーするのに約 1 秒かかります. 上記の方法は直接トリガーする方法ですが、要件がある場合はそれを参照して自分で処理することができます。
最後に、達成した効果をハングします。ホバーすると要素が非表示になり、別の要素が表示されます。またその逆も同様です。
要素の選択を容易にするために JQ を使用したサンプル パーツの完全なコード
html
<div class="menu">
<a>
<div>
<span>菜单1</span>
</div>
<p>内容1</p>
</a>
<a>
<div>
<span>菜单2</span>
</div>
<p>内容2</p>
</a>
</div>
js
$(".menu > a").mouseenter(function () {
$($(this).children("div")).slideUp();
$($(this).children("p")).slideDown();
});
$(".menu > a").mouseleave(function () {
$($(this).children("div")).slideDown();
$($(this).children("p")).slideUp();
});
var curEle;
document.ontouchstart = function () {
$(".menu > a > div").slideDown();
$(".menu > a > p").slideUp();
if (curEle) {
$($(curEle).children("div")).slideUp();
$($(curEle).children("p")).slideDown();
curEle = null;
}
};
$(".menu > a").each(function () {
this.ontouchstart = function() {
curEle = this;
};
});
終わり