1

次のコードがあります。 

if(text && spot && box) {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;

    document.getElementById('text-shadow-box').ontouchmove = function(e) {
        e.preventDefault();
        e.stopPropagation();

        onMouseMove({
            clientX: e.touches[0].clientX,
            clientY: e.touches[0].clientY
        });
    };
}

最初に割り当てられていないのは何ですかonmousemove = onMouseMove?なぜ割り当てられていないのですか? 私の他の質問: e はコンテキスト関数(e) と で何を意味しe.touches[0].clientxますか?

4

2 に答える 2

2

コードをインラインでコメントします。

//all variables ext,spot,box are defined, not "false" and not 0 and not null
if (ext && spot && box) {
/* We assign onmousemove event handler to the function, in javascript functions are vars
* function declared like `function function_name(param) {}` go to global scope, 
* and almost equal to 'function_name=function(param ) {}'
* var local scope use `var function_name=function(param) {}`
*/
            document.getElementById('text-shadow-box').onmousemove = onMouseMove;
/* add here is another example, you attach ontouchmove anonymous function,
* anonymous function BEGIN NEXT LINE */  
            document.getElementById('text-shadow-box').ontouchmove = function (e) {
 // e here it is event object, which passed to handler function as argument
 //it is jquery call, mean do not start other event handlers after this line
                e.preventDefault(); e.stopPropagation(); 
/* call function inMousemove, declared somewhere else
            The "{
                clientX: e.touches[0].clientX,
                clientY: e.touches[0].clientY
            }" here is object having two properties - clientX and clientY */
                onMouseMove({
                    clientX: e.touches[0].clientX,
                    clientY: e.touches[0].clientY
                });
/* anonymous function END NEXT LINE */
            };

ontouchmove およびその他のタッチスクリーン イベントはここで説明されていますが、タッチは画面へのタッチを処理するオブジェクトである ように見え ます。タッチスクリーン デバイスがないため、確認できませんが、タッチされた要素には 2 つの方法でアクセスできるようe.touches.item(n)です。 doc) および 2 番目 - e.touches を array として使用する場合e.touches[n]。n==0 は、w3c 仕様から理解できるように、最初に触れた要素を意味します。
event.stopPropagation()

説明: イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

event.preventDefault()

説明: このメソッドが呼び出された場合、イベントのデフォルト アクションはトリガーされません。

したがってevent.stopPropagation()、その要素の親がそのイベントを受け取るのを防ぎます (2 つの折りたたまれた div があり、両方にイベント リスナーがあるとします)。

デフォルトのアクションをevent.preventDefault()防ぎます（<a href="test.html"></a>onclickイベントハンドラーがあるとします。したがって、ブラウザーにtest.htmlをロードさせるアクションを防ぐのは良いことです

于 2012-10-21T15:15:51.633 に答える
0

onmousemove = onMouseMove は、HTML DOM イベント登録用です。この場合、HTML 要素「text-shadow-box」でマウス移動イベントが発生したときにメソッド「onMouseMove」を呼び出す必要があることを意味します。

ontouchmove は、タッチの動きをリッスンする別のイベントです。これは、モバイル クライアント (Android クライアントなど) で発生します。イベント ハンドラー内では、onMouseMove を使用して、タッチ ポイントをクライアント座標に変換することで、このイベントを処理します。

于 2012-10-21T15:14:21.790 に答える