Pause zwischen 2 Klicks erzwingen

**rehgum** · 03-05-2017, 12:22

Hallo Community,

folgendes Problem. Meine Webseite dient zur Steuerung einer SPS. Nun kommt es aber leider durch die benutzung des Touchscreens dazu das manchmal ein Button 2 mal gedrückt oder wenn man am Rand des Buttons klickt, zwei nebeneinander liegende Buttons gedrückt werden.
Die Buttons sind schon groß genug. Aber manch einer hat Bratzen statt Hände!

Gibt es eine Möglichkeit zu verhindern das ein Doppelklick gewertet wird oder das wenn ein Klick erfolgt ist die Webseite für z.B 300ms nicht mehr auf eingaben reagiert?

Vielen Dank!

**mikdoe** · 03-05-2017, 14:31

ja es gibt dafür viele möglichkeiten. steht denn an der maschine js und css uneingeschränkt zur verfügung wie in einem browser?

**kkapsner** · 03-05-2017, 18:34

HTML-Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<button id="button">click</button>
<script type="text/javascript">
function log(str){
	console.log(new Date(), str);
}
document.getElementById("button").addEventListener("click", function(){
	log("button clicked");
	log("disabling button");
	this.disabled = true;
	var button = this;
	window.setTimeout(function(){
		log("enabling button");
		button.disabled = false;
	}, 1000);
});
</script>
</body>
</html>

**rehgum** · 08-05-2017, 18:13

Super danke, so würde es klappen aber eben nur auf alle Elemente welche als id den "button" haben.
Ich möchte aber den klick innerhalb dieser Zeit komplett verbieten bzw. nicht werten. Dachte eher so an:

HTML-Code:

<script type="text/javascript" language="JavaScript">

// Wartezeitzeit bis klicken wieder erlaubt (in millisek) 
var Wartezeit = 300;

// bei mousedown klick für Wartezeit verbieten
function dontklick() {
Counter = 0 + Wartezeit;
return
}

</script>

<body onMousedown="dontklick()">

Nur wie genau...keine Ahnung. Wäre schön wenn das mit onMousedown ausgeführt werden würde und dann eben 300ms jeden weiteren klick nicht werten würde. Wie erwähnt handelt es sich um einen Touchscreen - wird dann trotzdem ein Mousedown erzeugt wenn man auf etwas tippt?

@mikedoe
Ja es ist ein Raspberry Pi 3 B mit Jessie drauf. Dort wird im Kioskmodus der Browser "Chromium" aufgerufen. Im Hintergrund läuft dann eine Anwendung welche auch die jQuery Lib und wenn benötigt auch noch die UI zur Verfügung stellt.

**miniA4kuser** · 09-05-2017, 13:52

Basierend auf kkapsners Beispiel evtl. so erweitern:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Disable buttons</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <button class="myDisableButton" id="button_1">click 1</button>
    <button class="myDisableButton" id="button_2">click 2</button>
    <button class="myDisableButton" id="button_3">click 3</button>
    <button class="myDisableButton" id="button_4">click 4</button>
    <button class="myDisableButton" id="button_5">click 5</button>
    <script>
    function log(str) {
        console.log(new Date(), str);
    }

    function forEach (array, callback, scope) {
        for (var i = 0; i < array.length; i++) {
            callback.call(scope, i, array[i]);
        }
    }

    var myDisableButtons = document.querySelectorAll('.myDisableButton');
    forEach(myDisableButtons, function (index, node) {
        console.log(index, node);
        node.addEventListener('click', function() {
            log("button " + node.id + " clicked");
            log("disabling all buttons");
            forEach(myDisableButtons, function (index, node) {
                node.disabled = true;
            });
            window.setTimeout(function() {
                log("enabling all buttons");
                forEach(myDisableButtons, function (index, node) {
                    node.disabled = false;
                });
            }, 1000);
        });
    });
    </script>
</body>
</html>

**rehgum** · 12-05-2017, 13:22

Mhh irgendwie reden wir aneinander vorbei. Vieleicht habe ich mich blöd ausgedrückt. Es handelt sich nicht um richtige "Buttons" sondern um ein JS welches aus einer XML ein Menü erstellt. Und diese Funktionen im Menü sollen quasi gesperrt werden.
Schwer zu erklären. Hier der Source-Code:

Code:

index(model) ::= <<
<!doctype html>
<html>
<style>
</style>
	<head>
		<title>Bespiel</title>
	    <link rel="stylesheet" href="base.css" />
	    <link rel="stylesheet" href="status.css" />
		<script src="jquery.js"></script>
		<script>
			var localRevision = -1;
			var runningAjaxRequest; 
			
			// call method
			function callDeviceMethod(deviceId, methodId) {
				jQuery.get('rest/devices/' + deviceId + '/methods/' + methodId);
			}

			
			// set attribute
			function setDeviceAttribute(deviceId, attributeId, attributeName, currentValue) {
				var newValue = prompt("Attributwert \"" + attributeName + "\" ändern:", currentValue);
				if (newValue != null) {
					jQuery.get('rest/devices/' + deviceId + '/attributes/' + attributeId + '/valueText?set=' + newValue);
				}
			}
			

			// update all gui elements
			function updateGui(attributeUpdates) {
				var lastDeviceId = -1;
				jQuery.each( attributeUpdates, function( index, updateItem ){
					
					// device
					var deviceSelectorKey = '#device' + updateItem.D;
					// detect first attribute of a device
					var firstAttributeOfDevice = (lastDeviceId != updateItem.D);
					lastDeviceId = updateItem.D;
					
					if (firstAttributeOfDevice) {
						// color knob
						var deviceKnob = jQuery(deviceSelectorKey + ' a span');
						var deviceColorType = deviceKnob.data('devicecolortype');
						
						var knobColor = "white";
						switch (deviceColorType) {
						case "RedGreen":
							switch (updateItem.V) {
								case 0:
									knobColor = "red";
									break;
								case 1:
									knobColor = "green";
									break;
							}
							break;
						case "RedYellowGreen":
							switch (updateItem.V) {
								case 0:
									knobColor = "red";
									break;
								case 1:
									knobColor = "yellow";
									break;
								case 2:
									knobColor = "green";
									break;
							}
							break;
						}
						deviceKnob.attr("class", knobColor + "Knob");
						
						// device value (value of first attribute, if this attribute is not represented by color)
						var deviceText = jQuery(deviceSelectorKey + ' a div');
						deviceText.text(updateItem.T);
					}

					
					// attribute
					var attributeSelectorKey = deviceSelectorKey + 'attribute' + updateItem.A;
					// update attribute edit href
					var obj = jQuery(attributeSelectorKey + ' a');
					var oldHref = obj.attr("href");
					var newHref = oldHref.replace(/(setDeviceAttribute\('\w+', '\w+', '.*?', ').+?('\))/, '\$1' + updateItem.T + '\$2');
					obj.attr("href", newHref);

					// update attribute value div
					jQuery(attributeSelectorKey + ' a div').text(updateItem.T);

				});
			}
			

 			// server push by long polling (Comet)
			function longPollAttributes(urlToPoll) {
				runningAjaxRequest = jQuery.ajax({
					url: urlToPoll,
					type: "GET",
					dataType : "json",
					
					// Code to run if the request succeeds;
					// the response is passed to the function
					success: function( attributeUpdateMessage ) {
						localRevision = attributeUpdateMessage.revisionNumber;
						updateGui(attributeUpdateMessage.attributeUpdates);
						jQuery("#connectionLostBox").hide();
						
						// current request completed, just start another call
						longPollAttributes("events/attributes?clientRev=" + localRevision); // long poll (wait for updates in relation to local revision)
					},
					
					error: function(xhr, error, errorThrown){
						if (error != "abort") {
							jQuery("#connectionLostBox").show();
							longPollAttributes("rest/attributes"); // full reload (no long poll) after connection broken 
						}
					}
				 
				});
				
			}


			// initial call (get all attributes for first display, after that do long polling)
			longPollAttributes("rest/attributes");

			jQuery(window).bind("beforeunload", function() {runningAjaxRequest.abort();});
			
		</script>
	</head>
	<body>
	    <div class="header">
			<ul>
			  <li>
				<a href="/index.html" class="header-actyvE">Admin</a>
		  </li>
			 
			</ul>
		</div>
		<table border="0" cellpadding="40">
            <tr align="left" valign="top">
                $model.infrastructure.Groups:{group | 
                    <td>
                    <h1 class="group">$group.Name$</h1>
                    $index_devices(group.Devices)$
					
					$group.Groups:{group |
                        <h2 class="group">$group.Name$</h2>
                        $index_devices(group.Devices)$
						
						$group.Groups:{group |
							<h3 class="group">$group.Name$</h3>
							$index_devices(group.Devices)$
							
							$group.Groups:{group |
								<h4 class="group">$group.Name$</h4>
								$index_devices(group.Devices)$
								
								$group.Groups:{group |
									<h5 class="group">$group.Name$</h5>
									$index_devices(group.Devices)$
								}$
							}$
						}$
                    }$

                    </td>
                }$

            </tr>
        </table>
		<div class="graybox-ontop" id="connectionLostBox">
			<div class="error-box">
				<div class="msg">Fehler – Keine Verbindung!</div>
			</div>	
		</div>

	</body>
</html>
>>

Hierbei geht es um die "$index_devices(group.Devices)$"

**miniA4kuser** · 12-05-2017, 14:22

Bei den ganzen Variablen ist es doch etwas mühsam zu erraten wie der fertige HTML-Code ausschaut. Du verwendes also Links (a href) auf die "geklickt" bzw. "getoucht" wird?

Wenn ja, wie sehen diese dann aus?

**tsseh** · 12-05-2017, 15:00

registriere im click einen click-handler am document in der capturing phase
im handler verhinderst du die weiterleitung
nach deiner abgelaufenen zeit entfernst du diesen eventhandler wieder

**rehgum** · 12-05-2017, 17:17

Das Script ist nicht von mir.
Es geht hierbei um die "LogoControl" von Frickelzeugs.de
LogoControl | Frickelzeugs
Es wird also die Middelware gestartet welche ein Webinterface hostet. Das besteht eben aus der index.st (Code eben gepostet) einer css und eben den js.
Da bin ich aber leider auch nicht tief genung drin. Ich dachte nur eben man könnte über einen einfachen Script welcher durch "mousedown" ausgelöst wird eben jeden weiteren Mousedown für eine einstellbare Zeit egal worauf auf der Webseite nicht werten.

Eben mit "<body onMousedown="dontklick()">" den Script "dontklick" ausführen. Und der soll eben dafür sorgen das "onMousedown" nicht gewertet wird oder in etwas umgewandelt wird.

**kkapsner** · 19-05-2017, 18:43

Genau das hat doch tsseh beschrieben.

Thema: Pause zwischen 2 Klicks erzwingen

LinkBack

Themen-Optionen

Anzeige

Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

AW: Pause zwischen 2 Klicks erzwingen

Ähnliche Themen

Pause erzwingen mit setInterval oder setTimeout

Button, onclick, pause zwischen mehreren Befehlen

Hits ( Klicks ) zählen ... ?!

Pause bei Scrollfunktion zur Bearbeitung von Klicks etc.

Klickzähler-Klicks anzeigen

Lesezeichen

Lesezeichen

Berechtigungen

Anfänger Frage mit bitte um Hilfe!

Textfarbe durch Button ändern...

Wie Parameter zu EventHandlers...

JavaScript, async / await

Google Tabellen Script bestimmten...

Anfänger Frage mit bitte um Hilfe!

Wie Parameter zu EventHandlers...

Textfarbe durch Button ändern...

Textfarbe durch Button ändern...

Wie Parameter zu EventHandlers...