[解決済み] マウスの "クリック "と "ドラッグ "の見分け方
2022-04-14 02:29:27
質問
私が使っているのは
jQuery.click
はRaphaelグラフのマウスクリックイベントを処理するために必要であり、一方、私はマウス
drag
イベント、マウスドラッグは
mousedown
,
mouseup
と
mousemove
をRaphaelに搭載しました。
を区別することは困難です。
click
と
drag
なぜなら
click
も含まれています。
mousedown
&です。
mouseup
Javascriptでマウスのクリックとドラッグを区別するにはどうしたらいいですか?
どのように解決するのですか?
という違いがあると思います。
mousemove
の間に
mousedown
と
mouseup
をドラッグで使用することはできますが、クリックで使用することはできません。
というようなことができます。
const element = document.createElement('div')
element.innerHTML = 'test'
document.body.appendChild(element)
let moved
let downListener = () => {
moved = false
}
element.addEventListener('mousedown', downListener)
let moveListener = () => {
moved = true
}
element.addEventListener('mousemove', moveListener)
let upListener = () => {
if (moved) {
console.log('moved')
} else {
console.log('not moved')
}
}
element.addEventListener('mouseup', upListener)
// release memory
element.removeEventListener('mousedown', downListener)
element.removeEventListener('mousemove', moveListener)
element.removeEventListener('mouseup', upListener)
関連
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] JavaScriptで配列を比較する方法は?