10

Chromeのデベロッパーツールで[タッチイベントのエミュレート]オプションを有効にしました。に触れたときにアラートを出す簡単なテストプログラムを設定しました<div>。このプログラムはGalaxyNexusで正常に動作しますが<div>、Chromeで[タッチイベントのエミュレート]オプションを有効にしても、をクリックしても何も起こりません。助言がありますか？このツールを正しく使用していますか？

これが私のコードです-派手すぎるものは何もありません。

<!DOCTYPE html>
<html lang="en">
<head>      
    <style type="text/css">
        #main_div
        {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: red;
            top: 50%;
            left: 20px;             
        }           
    </style>
    <script type="text/javascript">
        function init()
        {
            main_div = document.getElementById("main_div");             
            main_div.ontouchstart = function() 
            {                    
                 alert("here");
            }                               
        }
    </script>
</head>
<body onload="init()">
    <div>
        <p id="x">hello</p>
        <p id="y"></p>
    </div>
    <div id="main_div">
        hello
    </div>
</body>
</html>
4

6 に答える 6

13

私を困惑させたのは、「タッチイベントをエミュレートする」チェックボックスをオンにするだけでなく、オーバーライドを有効にするには、マスターの「有効にする」チェックボックスもオンにする必要があることでした。両方がチェックされると、うまくいきました。

ここに画像の説明を入力

于 2013-10-02T05:11:13.220 に答える
4

タッチ イベントは Chrome バージョン 21 で機能します (以前のバージョンについてはわかりません)。ただし、タッチ イベントが発生するためには、開発者ツール ウィンドウを開いたままにしておく必要があります。ウィンドウを閉じると、通常のマウス イベントに戻ります。

于 2012-08-22T13:17:42.677 に答える
2

私が気付いた 1 つの重要なポイント - [タッチ イベントをエミュレート] をオンにしても、マウス イベントが無効になるわけではなく、タッチも追加されるだけです。

于 2012-09-18T13:49:08.477 に答える
1

試したコードを共有できますか? これは、iPhone と Chrome 19 の両方で動作するサンプル コードです。

<head>
 <script>
function listen(elem, evnt, func) {
  if (elem.addEventListener)  // W3C DOM5.        
    elem.addEventListener(evnt,func,false);
  else if (elem.attachEvent) { // IE DOM7.         
    var r = elem.attachEvent("on"+evnt, func);
    return r;
  }
}

function attachListeners() {
var touch_div = document.getElementById('touch_me');
listen(touch_div,'touchmove', function(event) {
    touch_div.innerHTML="being touched " + event.targetTouches.length;
    touch_div.style.background =green;
}, false);
listen(touch_div,'touchstart', function(event) {
    event.preventDefault();
    touch_div.innerHTML="touchstart";
    touch_div.style.background ='green';
}, false);
listen(touch_div,'touchend', function(event) {
    touch_div.innerHTML="thanks!";
    touch_div.style.background ='#CCFF66';
}, false);
listen(touch_div,'click', function(event) {
    touch_div.innerHTML="hey - touch, not click!";
    touch_div.style.background ='red';
}, false);
listen(touch_div,'onmouseup', function(event) {
    touch_div.innerHTML="hey - that was a click!";
    touch_div.style.background ='';
}, false);
 }

function run_onload() {
attachListeners();
}   

 </script>

 </head>
 <body onload="run_onload()">
 <div id="touch_me">Touch me!</div>
 </body>
于 2012-06-19T12:56:56.783 に答える
1

私のために働いている唯一のことは、ページがリロードされるたびに Emulation > Sensors in Chrome 45 にある Emulate Touch Events を切り替えることです。これはかなりくだらない解決策です。誰かが迷惑な修正を見つけてくれることを願っています。

ここに画像の説明を入力

于 2015-09-04T19:28:49.487 に答える