15

私は、マウスとタッチの両方の相互作用をサポートするWebアプリケーションを作成しています。テストには、Windows7でタッチスクリーンデバイスを使用します。最新のFirefoxおよびChromeCanaryでタッチイベントをスニッフィングしようとしましたが、次の結果が得られました。

タッチすると、Firefoxはタッチと対応するマウスイベントを発生させます。Chrometouchstart/mousedownはtouchend/mouseupペアでmousemove起動しますが、非常に奇妙な方法で起動しtouchmoveます。

すべてのマウスイベントは通常どおり処理されます。

最新のタッチスクリーンでマウスとタッチ偶数を同時に処理する方法はありますか？Firefoxがタッチイベントとマウスイベントのペアを起動した場合、Chromeでは何が起こりtouchmoveますmousemoveか？すべてのマウスイベントをタッチに変換する必要がありますか、またはその逆に変換する必要がありますか？レスポンシブインターフェイスを作成する正しい方法を見つけたいと思っています。

4

6 に答える 6

18

どのイベントをリッスンするかを事前に予測することはできません (たとえば、ページが読み込まれた後に USB タッチ スクリーンが接続される可能性があることはわかっています)。

代わりに、常にタッチ イベントとマウス イベントの両方をリッスンする必要がありますが、処理するタッチ イベントで preventDefault() を呼び出して、(冗長な) マウス イベントが発生しないようにします。詳細については、 http://www.html5rocks.com/en/mobile/touchandmouse/を参照してください。

于 2013-04-25T14:02:12.393 に答える
8

むしろ、タッチ インターフェイスの可用性を確認し、それに応じてイベントをバインドする必要があります。

次のようなことができます。

(function () {
    if ('ontouchstart' in window) {
        window.Evt = {
            PUSH : 'touchstart',
            MOVE : 'touchmove',
            RELEASE : 'touchend'
        };
    } else {
        window.Evt = {
            PUSH : 'mousedown',
            MOVE : 'mousemove',
            RELEASE : 'mouseup'
        };
    }
}());

// and then...

document.getElementById('mydiv').addEventListener(Evt.PUSH, myStartDragHandler, false);

両方を同時に処理したいが、ブラウザーがタッチ イベントをマウス イベントにうまく変換しない場合は、タッチ イベントをキャッチして停止することができます。その後、対応するマウス イベントをブラウザーで発生させないでください (ダブル イベントは発生しません)。マウスイベントとして自分で起動するか、単に処理することができます。

var mydiv = document.getElementsById('mydiv');
mydiv.addEventListener('mousemove', myMoveHandler, false);
mydiv.addEventListener('touchmove', function (e) {
    // stop touch event
    e.stopPropagation();
    e.preventDefault();

    // translate to mouse event
    var clkEvt = document.createEvent('MouseEvent');
    clkEvt.initMouseEvent('mousemove', true, true, window, e.detail, 
                 e.touches[0].screenX, e.touches[0].screenY, 
                 e.touches[0].clientX, e.touches[0].clientY, 
                 false, false, false, false, 
                 0, null);
    mydiv.dispatchEvent(clkEvt);

    // or just handle touch event
    myMoveHandler(e);
}, false);
于 2013-01-25T22:51:20.053 に答える
1

MouseEvents と TouchEvents は、技術的にまったく同じ機能を提供するわけではありませんが、ほとんどの目的で、同じ意味で使用できます。ユーザーはマウスとタッチスクリーンの両方を持っている可能性があるため、このソリューションはどちらか一方を優先するものではありません。代わりに、入力を変更する前に少なくとも 5 秒間待つ限り、ユーザーは任意の入力デバイスを使用できます。このソリューションは、画面がタップされたときに、タッチスクリーン デバイスでのマウス ポインターのエミュレーションを無視します。

var lastEvent = 3  ;
var MOUSE_EVENT = 1;
var TOUCH_EVENT = 2 ; 
 

element.addEventListener('touchstart', function(event)
		{
			 
			if (lastEvent === MOUSE_EVENT  )
			{
				var time =  Date.now() - eventTime  ;  
				if ( time > 5000 ) 
				{
					eventTime = Date.now() ;
					lastEvent = TOUCH_EVENT ;
					interactionStart(event) ;
				} 
			}
			else 
			{
				lastEvent = TOUCH_EVENT ; ;
				eventTime = Date.now() ;
				interactionStart(event)  ; 
			}
			 
		}) ;	

		element.addEventListener('mousedown',	function(event)
		{
			
			if (lastEvent === TOUCH_EVENT  )
			{
				var time =  Date.now() - eventTime  ;	
				if ( time > 5000 ) 
				{
					eventTime = Date.now() ;
					lastEvent = MOUSE_EVENT ;
					interactionStart(event) ;
				} 
			}
			else 
			{
				lastEvent=  MOUSE_EVENT ; 
				eventTime = Date.now() ;
				interactionStart(event)  ; 
			}
		}) ;  

function interactionStart(event) // handle interaction (touch or click ) here.
{...}

これは決してすべての解決策ではありません。私はこれを数回使用しましたが、問題は見つかりませんでしたが、公平を期すために、通常はキャンバスをタップしたときにアニメーションを開始するか、回転するロジックを提供するために使用しますボタンへのdiv。このコードを使用し、改善点を見つけて、このコードを改善するのを助けることは、皆さんに任せます (より良い解決策が見つからない場合)。

于 2016-06-06T18:04:15.623 に答える
0

この jQuery ヘルパーを使用して、タッチ イベントとクリック イベントの両方をバインドしています。

(function ($) {
$.fn.tclick = function (onclick) {
    this.bind("touchstart", function (e) { onclick.call(this, e); e.stopPropagation(); e.preventDefault(); });
    this.bind("click", function (e) { onclick.call(this, e); });   //substitute mousedown event for exact same result as touchstart         
    return this;
  };
})(jQuery);
于 2013-05-19T21:25:49.500 に答える