Ergebnis 1 bis 10 von 10
Like Tree1Likes
  • 1 Post By rehgum

Thema: Pause zwischen 2 Klicks erzwingen

  1. #1
    rehgum ist offline Grünschnabel
    registriert
    24-02-2017
    Beiträge
    6

    Question Pause zwischen 2 Klicks erzwingen

    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!

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.391

    AW: Pause zwischen 2 Klicks erzwingen

    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.440

    AW: Pause zwischen 2 Klicks erzwingen

    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>

  4. #4
    rehgum ist offline Grünschnabel
    registriert
    24-02-2017
    Beiträge
    6

    AW: Pause zwischen 2 Klicks erzwingen

    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.
    mikdoe likes this.

  5. #5
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.019

    AW: Pause zwischen 2 Klicks erzwingen

    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>
    Hoffe ich konnte helfen

  6. #6
    rehgum ist offline Grünschnabel
    registriert
    24-02-2017
    Beiträge
    6

    AW: Pause zwischen 2 Klicks erzwingen

    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)$"

  7. #7
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.019

    AW: Pause zwischen 2 Klicks erzwingen

    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?
    Hoffe ich konnte helfen

  8. #8
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.473

    AW: Pause zwischen 2 Klicks erzwingen

    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

  9. #9
    rehgum ist offline Grünschnabel
    registriert
    24-02-2017
    Beiträge
    6

    AW: Pause zwischen 2 Klicks erzwingen

    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.

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.440

    AW: Pause zwischen 2 Klicks erzwingen

    Genau das hat doch tsseh beschrieben.

Ähnliche Themen

  1. Pause erzwingen mit setInterval oder setTimeout
    Von hilfebedürftig im Forum JavaScript
    Antworten: 111
    Letzter Beitrag: 10-11-2012, 02:43
  2. Button, onclick, pause zwischen mehreren Befehlen
    Von Bububaba im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 17-06-2008, 16:06
  3. Hits ( Klicks ) zählen ... ?!
    Von Strichmaxal im Forum JavaScript
    Antworten: 23
    Letzter Beitrag: 29-03-2003, 15:21
  4. Pause bei Scrollfunktion zur Bearbeitung von Klicks etc.
    Von DarealZnarkde im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 04-11-2002, 17:02
  5. Klickzähler-Klicks anzeigen
    Von asnoopa im Forum Serverseitige Programmierung
    Antworten: 0
    Letzter Beitrag: 19-04-2001, 01:00

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •