Implementierungscode des JS-Maus-3-Klick-Ereignisses
In den letzten Tagen habe ich über Dom-Ereignisse in der erweiterten JavaScript-Programmierung gelesen und im Internet gesehen, dass Mausereignisse zu den einfachen und häufig verwendeten Ereignissen gehören Arbeiten Sie an der Erweiterung und Implementierung von Klickereignissen, um das Verständnis von Dom-Ereignissen zu verbessern. Die Umsetzung und Ideen werden von mir selbst zusammengefasst. Wenn etwas nicht stimmt, bitten Sie die Experten, es mir mitzuteilen und zu korrigieren. In diesem Artikel werden hauptsächlich die Implementierungs- und Erweiterungsideen von JS-Maus-3-Klick-Ereignissen vorgestellt. Freunde, die es benötigen, können darauf verweisen.
1. Erstellen Sie ein allgemeines Ereignisverarbeitungsmodul (native Implementierung)
Die folgende Implementierung basiert auf der AMD-Moduldefinitionsmethode:
/** * 浏览器兼容事件处理组件 */ define(function () { var EventUtil = { // 添加事件监听 addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false);// DOM2级事件 } else if (element.attachEvent) { element.attachEvent('on' + type, handler);// DOM2级IE事件 } else { element['on' + type] = handler;// DOM0级事件 } }, // 移除事件监听 removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 获取事件对象 getEvent: function (event) { return event ? event : window.event; }, // 获取事件的目标元素 getTarget: function (event) { return event.target || event.srcElement; }, // 禁止事件默认行为 preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 禁止事件冒泡 stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; return EventUtil; });
2. Implementierung des Maus-3-Klick-Ereignisses
Die am Mausklick-Ereignis beteiligten Ereignisse und die Ausführungsauslösesequenz:
Mousedown: Eine beliebige Maustaste wird gedrückt. Ausgelöst, wenn
Mouseup: Wird ausgelöst, wenn die Maustaste losgelassen wird.
Klick: Geklickt
Mousedown
Mouseup
dblclick: Doppelklick
Klick hängt natürlich von dblclick ab. Sie können die Verwendung dieser beiden Ereignisse in Betracht ziehen, um die Ausführung durch drei aufeinanderfolgende Mausklicks auszulösen Wenn das Klickereignis innerhalb einer kurzen Zeitspanne ausgelöst wird, stellt es einen kontinuierlichen Mausklick dar. Der Effekt des dreimaligen Klickens wird wie folgt umgesetzt:
<p> <button id="button">鼠标3击</button> </p>
js-Code
require(['eventUtil'], function (EventUtil) { var button = document.getElementById('button'); click3Event(button, function (event) { console.log('3 click'); }); // 鼠标3击事件 function click3Event(dom, fn) { var handler = function (event) { var event = EventUtil.getEvent(event), target = EventUtil.getTarget(event); var handler = function (event) { var event = EventUtil.getEvent(event), target = EventUtil.getTarget(event); EventUtil.removeHandler(target, 'click', handler); // 执行内容 fn(); }; EventUtil.addHandler(target, 'click', handler); // 为防止双击后较长时间再次单击执行事件 setTimeout(function () { EventUtil.removeHandler(target, 'click', handler); }, 300); }; EventUtil.addHandler(dom, 'dblclick', handler); }
3. Implementierung des N-Klick-Ereignisses der Maus
Verknüpft mit dem 3-Klick-Mausereignis, wie um die n-malige Auslösung von Mauskombinationsereignissen zu implementieren. Die Idee, die mir in den Sinn kommt, ist: Deaktivieren Sie das dblclick-Ereignis des Zielobjekts und verwenden Sie das Klickereignis nur zur logischen Beurteilung und Ausführung kontinuierlicher Klicks. Wenn innerhalb eines kurzen Zeitraums n Klicks erreicht werden, wird andernfalls die Ausführung ausgelöst die kumulierte Zahl wird neu berechnet. Der spezifische Implementierungscode lautet wie folgt:
require(['eventUtil'], function (EventUtil) { var button = document.getElementById('button'); nclickEvent(4, button, function (event, n) { console.log(n + ' click'); }); function nclickEvent (n, dom, fn) { // 禁止双击事件 EventUtil.removeHandler(dom, 'dblclick', null); var n = parseInt(n) < 1 ? 1 : parseInt(n), count = 0, lastTime = 0; var handler = function (event) { var currentTime = new Date().getTime(); count = (currentTime - lastTime < 300) ? count + 1 : 0; lastTime = new Date().getTime(); if (count >= n - 1) { fn(event, n); count = 0; } }; EventUtil.addHandler(dom, 'click', handler); } });
Abschließend werde ich Ihnen eine JQuery-Version des Codes mitteilen
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="box">234234234234234</p> <script src="js/jquery.min.js"></script> <script> (function(){ var num=0,d=null; $('#box').click(function(){ if(d){clearTimeout(d)} d=setTimeout(function(){ num=0 },200); num++; if(num>=3){ alert(num+"\n ok") } }) })(); </script> </body> </html>
Verwandte Empfehlungen:
Rechtsklick-Ereignis für benutzerdefinierte jQuery-Elemente
Informationen zum Bindungs-Klickereignis für js Index Subscript Li Collection Beispielfreigabe
Das obige ist der detaillierte Inhalt vonImplementierungscode des JS-Maus-3-Klick-Ereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Was tun mit dem Bluescreen-Code 0x0000001? Der Bluescreen-Fehler ist ein Warnmechanismus, wenn ein Problem mit dem Computersystem oder der Hardware vorliegt. Der Code 0x0000001 weist normalerweise auf einen Hardware- oder Treiberfehler hin. Wenn Benutzer bei der Verwendung ihres Computers plötzlich auf einen Bluescreen-Fehler stoßen, geraten sie möglicherweise in Panik und sind ratlos. Glücklicherweise können die meisten Bluescreen-Fehler mit ein paar einfachen Schritten behoben werden. In diesem Artikel werden den Lesern einige Methoden zur Behebung des Bluescreen-Fehlercodes 0x0000001 vorgestellt. Wenn ein Bluescreen-Fehler auftritt, können wir zunächst versuchen, neu zu starten

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mit dem Aufkommen der sozialen Medien ist WeChat zu einem unverzichtbaren Kommunikationsmittel im täglichen Leben der Menschen geworden. Viele Menschen können jedoch auf ein Problem stoßen: Sie können sich gleichzeitig auf demselben Mobiltelefon bei mehreren WeChat-Konten anmelden. Für Huawei-Mobiltelefonbenutzer ist es nicht schwierig, eine doppelte WeChat-Anmeldung zu erreichen. In diesem Artikel wird erläutert, wie eine doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen erreicht wird. Erstens bietet das EMUI-System, das mit Huawei-Mobiltelefonen geliefert wird, eine sehr praktische Funktion – das doppelte Öffnen von Anwendungen. Durch die doppelte Öffnungsfunktion der Anwendung können Benutzer gleichzeitig

Wenn Sie ein Gerät aus der Ferne programmieren müssen, hilft Ihnen dieser Artikel. Wir teilen Ihnen die besten Universal-Fernbedienungscodes von GE für die Programmierung aller Geräte mit. Was ist eine GE-Fernbedienung? GEUniversalRemote ist eine Fernbedienung, mit der mehrere Geräte wie Smart-TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, Streaming-Media-Player und mehr gesteuert werden können. GEUniversal-Fernbedienungen gibt es in verschiedenen Modellen mit unterschiedlichen Merkmalen und Funktionen. GEUniversalRemote kann bis zu vier Geräte steuern. Top-Universalfernbedienungscodes zum Programmieren auf jedem Gerät GE-Fernbedienungen werden mit einer Reihe von Codes geliefert, die es ihnen ermöglichen, mit verschiedenen Geräten zu arbeiten. Sie können

Die Programmiersprache PHP ist ein leistungsstarkes Werkzeug für die Webentwicklung, das eine Vielzahl unterschiedlicher Programmierlogiken und Algorithmen unterstützen kann. Unter diesen ist die Implementierung der Fibonacci-Folge ein häufiges und klassisches Programmierproblem. In diesem Artikel stellen wir vor, wie Sie die Fibonacci-Folge mit der Programmiersprache PHP implementieren, und fügen spezifische Codebeispiele bei. Die Fibonacci-Folge ist eine mathematische Folge, die wie folgt definiert ist: Das erste und das zweite Element der Folge sind 1, und ab dem dritten Element ist der Wert jedes Elements gleich der Summe der beiden vorherigen Elemente. Die ersten paar Elemente der Sequenz

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mit der Popularität sozialer Software und der zunehmenden Bedeutung von Datenschutz und Sicherheit rückt die WeChat-Klonfunktion allmählich in den Mittelpunkt der Aufmerksamkeit der Menschen. Die WeChat-Klonfunktion kann Benutzern helfen, sich gleichzeitig bei mehreren WeChat-Konten auf demselben Mobiltelefon anzumelden, was die Verwaltung und Nutzung erleichtert. Es ist nicht schwierig, die WeChat-Klonfunktion auf Huawei-Mobiltelefonen zu implementieren. Sie müssen lediglich die folgenden Schritte ausführen. Schritt 1: Stellen Sie sicher, dass die Version Ihres Mobiltelefonsystems und die WeChat-Version den Anforderungen entsprechen. Stellen Sie zunächst sicher, dass die Version Ihres Huawei-Mobiltelefonsystems sowie die WeChat-App auf die neueste Version aktualisiert wurden.

Als Programmierer bin ich begeistert von Tools, die das Programmiererlebnis vereinfachen. Mithilfe von Tools der künstlichen Intelligenz können wir Democode generieren und die erforderlichen Änderungen entsprechend den Anforderungen vornehmen. Das neu eingeführte Copilot-Tool in Visual Studio Code ermöglicht es uns, KI-generierten Code mit Chat-Interaktionen in natürlicher Sprache zu erstellen. Durch die Erläuterung der Funktionalität können wir die Bedeutung des vorhandenen Codes besser verstehen. Wie verwende ich Copilot zum Generieren von Code? Um zu beginnen, müssen wir zunächst die neueste PowerPlatformTools-Erweiterung herunterladen. Um dies zu erreichen, müssen Sie zur Erweiterungsseite gehen, nach „PowerPlatformTool“ suchen und auf die Schaltfläche „Installieren“ klicken

Im heutigen Bereich der Softwareentwicklung wird Golang (Go-Sprache) als effiziente, prägnante und hochgradig parallele Programmiersprache von Entwicklern zunehmend bevorzugt. Seine umfangreiche Standardbibliothek und die effizienten Parallelitätsfunktionen machen es zu einer hochkarätigen Wahl im Bereich der Spieleentwicklung. In diesem Artikel wird untersucht, wie man Golang für die Spieleentwicklung verwendet, und seine leistungsstarken Möglichkeiten anhand spezifischer Codebeispiele demonstriert. 1. Golangs Vorteile bei der Spieleentwicklung: Als statisch typisierte Sprache wird Golang beim Aufbau großer Spielsysteme verwendet.

Implementierungsleitfaden für PHP-Spielanforderungen Mit der Popularität und Entwicklung des Internets erfreut sich der Markt für Webspiele immer größerer Beliebtheit. Viele Entwickler hoffen, die PHP-Sprache zur Entwicklung ihrer eigenen Webspiele nutzen zu können, und die Umsetzung der Spielanforderungen ist ein wichtiger Schritt. In diesem Artikel wird erläutert, wie Sie mithilfe der PHP-Sprache allgemeine Spielanforderungen implementieren und spezifische Codebeispiele bereitstellen. 1. Spielfiguren erstellen In Webspielen sind Spielfiguren ein sehr wichtiges Element. Wir müssen die Attribute des Spielcharakters wie Name, Level, Erfahrungswert usw. definieren und Methoden für deren Bedienung bereitstellen
