Rumah hujung hadapan web tutorial js jQuery关于鼠标事件mouseDown和doubleClick运行冲突的问题解决

jQuery关于鼠标事件mouseDown和doubleClick运行冲突的问题解决

Jun 28, 2017 am 09:29 AM
jquery peristiwa

首先,现在有一个需求是在一个对象上监听mouseDown和mouseDoubleClick事件,两种事件对应不同的解决方案,鼠标按下执行拖拽功能,鼠标双击是释放技能功能。但是问题来了,不管Click几次,肯定是down先触发,不管如何都是down触发。

然后呢,我问了一高手,他说,可以推迟按下的处理函数,推迟200ms(因为大概在200ms内算双击),在这200ms内,有双击了,就先执行双击事件,并且要把原本双击事件的处理函数跟按下的处理函数一起写在mouseDown里。我这样做了,还是出错。因为,即使推迟了执行按下的函数,可最终还是要执行按下的函数(就是先执行原来双击事件,在执行推迟200ms的按下函数)。

所以,问题就是:我怎么让down函数知道我到底执行的是拖拽还是释放呢?
我觉得这像死锁功能,一个功能执行完了,那在这个对象上的那个功能就不能执行了。啊啊啊,想的头都大了,还是想不出来!

大家虽然热心提供了方法,我也一一试了,但是还是解决不了我的需求,可能因为我没有把需求彻底说清楚吧,现在提供一张我自己总结的,这个问题可能的流程图:

1619.png

其实也不一定是两两排斥的,因为毕竟市面上那么多页游的背包都是这样做的了···
给个思路:在UP事件的处理函数中做下判断,如果鼠标还在背包,就弹出二级菜单,如果鼠标已经不在背包,就是拖拽操作。

doubleClickEnabled = true;要双击的对象只有设置为true,才能侦听到鼠标双击事件,也才能将单击和双击事件区分出来,如果两次单击相隔时间很小,会被视为双击
看看这个有没有漏掉    

拖拽除了单击之外还有一个特征,即单击后鼠标出现移动。
满足如下条件即判断为“释放”:
有正在拖拽的物体,单击一次鼠标,在300ms内再单击一次鼠标,第二次单击时的位置与第一次单击时的位置相差不到5像素(手滑误差)

其它的行为,
根据是否已经有拖拽物来判定为
“拖拽”
或者
“无效操作”

你那位高手说的对啊,当得到mouseDown后给一个延时,
200ms内得到第二个mouseDown事件则是释放了,就取消延时后的拖拽事件
200ms后没收到第二个mouseDown且也没收到mouseUp事件那就拖拽呗;

而且不一定非要这么做啊
可以把对象细分下嘛,对象边框只响应拖拽事件,
对象中间只响应释放事件

或者把对象拖到界面外释放对象,什么的。。。
如果客户执着就没办法了    

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

/**
* ...
* @author 小松626
*/
public class Main extends Sprite
{
private var _mc:Sprite;
private var date2Time:Number;
private var date1:Date;
private var date1Time:Number;
private var date2:Date;

public function Main():void
{
if (stage)
init();
else
addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
creatMc();
_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMouseDownHandler);
}

private function creatMc():void 
{
_mc = new Sprite();
_mc.graphics.beginFill(0xff0000);
_mc.graphics.drawCircle(0, 0, 20);
_mc.graphics.endFill();
addChild(_mc);
_mc.x = 50;
_mc.y = 50;
}

private function dragMouseDownHandler(e:MouseEvent):void
{
_mc.startDrag(false); 
date1 = new Date();
date1Time = date1.time;
stage.addEventListener(MouseEvent.MOUSE_UP, dragMouseUpHandler); //鼠标抬起侦听事件
}

/*
* 鼠标抬起侦听事件函数
*/
private function dragMouseUpHandler(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, dragMouseUpHandler); //鼠标抬起侦听事件(移除) 
date2 = new Date();
date2Time = date2.time;
if (date2Time - date1Time > 100)
{
_mc.stopDrag(); //停止拖拽
}
else
{
_mc.doubleClickEnabled = true;
_mc.addEventListener(MouseEvent.DOUBLE_CLICK, mcDoubleClickHandler);
}
}

private function mcDoubleClickHandler(e:MouseEvent):void 
{
trace("双击mc");
}

}

}
Salin selepas log masuk

加一个true或false的判断,表示是否刚发生过双击。如果刚发生过双击(双击事件发生时,设其为true),200ms后就不执行原先的单机函数,只把那个变量重新设为flase。

   

Atas ialah kandungan terperinci jQuery关于鼠标事件mouseDown和doubleClick运行冲突的问题解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Feb 27, 2024 pm 06:45 PM

Penjelasan terperinci kaedah rujukan jQuery: Panduan Mula Pantas jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas dalam pembangunan tapak web Ia memudahkan pengaturcaraan JavaScript dan menyediakan pemaju dengan fungsi dan ciri yang kaya. Artikel ini akan memperkenalkan kaedah rujukan jQuery secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat. Memperkenalkan jQuery Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN atau dimuat turun

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Feb 28, 2024 am 08:39 AM

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

Fahami peranan dan senario aplikasi eq dalam jQuery Fahami peranan dan senario aplikasi eq dalam jQuery Feb 28, 2024 pm 01:15 PM

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan manipulasi DOM dan pengendalian acara dalam halaman web. Dalam jQuery, kaedah eq() digunakan untuk memilih elemen pada kedudukan indeks tertentu Senario penggunaan dan aplikasi khusus adalah seperti berikut. Dalam jQuery, kaedah eq() memilih elemen pada kedudukan indeks yang ditentukan. Kedudukan indeks mula dikira dari 0, iaitu indeks elemen pertama ialah 0, indeks elemen kedua ialah 1, dan seterusnya. Sintaks kaedah eq() adalah seperti berikut: $("s

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Feb 29, 2024 am 09:03 AM

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu

Bagaimana untuk membina aplikasi berasaskan acara menggunakan PHP Bagaimana untuk membina aplikasi berasaskan acara menggunakan PHP May 04, 2024 pm 02:24 PM

Kaedah untuk membina aplikasi berasaskan acara dalam PHP termasuk menggunakan EventSourceAPI untuk mencipta sumber acara dan menggunakan objek EventSource untuk mendengar acara di sisi pelanggan. Hantar acara menggunakan Peristiwa Dihantar Pelayan (SSE) dan dengar acara pada sisi klien menggunakan objek XMLHttpRequest. Contoh praktikal ialah menggunakan EventSource untuk mengemas kini kiraan inventori dalam masa nyata dalam tapak web e-dagang Ini dicapai pada bahagian pelayan dengan menukar inventori dan menghantar kemas kini secara rawak, dan pelanggan mendengar kemas kini inventori melalui EventSource dan memaparkannya dalam. masa sebenar.

See all articles