JavaScript Alternative zu onClick ?

rony12 · 21. Februar 2013

Hallo,

ich habe ein kleines Skript von jQuery genommen (jQuery Sortable) mit dem ich ein paar DIVs verschieben kann. - Funktioniert auch alles schön

Nun kann man aber die DIVs, die ich verschieben kann, auch anklicken (onclick="location.href='#'").
Wenn ich also ein DIV verschicbe, und meine Maustaste los lassen, klickt natürlich auch das DIV an und ich werde weitergeleitet....

Gibt es da eine möglichkeit, dass ein "lang gehaltener klick" anders behandelt wird, als ein normaler klick ^^....?
Bzw. kennt da jemand eine andere möglichkeit?

1668mib · 21. Februar 2013

Gibt doch Events für start und stop
http://api.jqueryui.com/sortable/

im Event für start könntest du sagen
allowClicks = false

und im Event für stop dann
allowClicks = true

und im onClick dann
if (!allowClicks) return;

natürlich etwas schöner machen usw, aber in die Richtung könnte man vielleicht gehen... ka ob es nicht eleganer geht bzw. ob es so überhaupt geht

Edit: An sich gibt es bei mir aber gar keine Probleme mit Clicks...

Zumindest geht der Code bei mir so unter Chrome

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sortable demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
 
<ul id="sortable">
  <div onClick="alert('Item 1')">Item 1</div>
  <div onClick="alert('Item 2')">Item 2</div>
  <div onClick="alert('Item 3')">Item 3</div>
  <div onClick="alert('Item 4')">Item 4</div>
</ul>
 
<script>$("#sortable").sortable();</script>
 
</body>
</html>

rony12 · 21. Februar 2013

ok... danke

aber scheint wohl schon zu spät zu sein... mit meinen sehr beschränkten js wissen blick ich das aktuell nicht so ganz... ich glaub ich schau morgen nochmal ^^

Edit...
Dein Edit war eben noch nicht da... interessant, unter Chrome und Opera geht es wie gewollt. FX18 führt den onclick aus... mmmh... das ist ja blöd... dann braucht man ja einen ganz anderen ansatz :/ - oder?

1668mib · 21. Februar 2013

Naja mit dem wasi ich geschrieben hab (ohne) Edit könnte man es dennoch probieren.

Aber genau das sind die Dinge, warum ich absolut keinen Bock mehr auf JavaScript habe :-)

Spike S. · 21. Februar 2013

Da gibt es eine Menge an Events: http://de.selfhtml.org/javascript/sprache/eventhandler.htm
In deinem Fall:
- onkeydown (bei gedrückter Taste)
- onkeypress (bei gedrückt gehaltener Taste)
- onkeyup (bei losgelassener Taste)

1668mib · 21. Februar 2013

@Spike S.: Die Menge der Events ist ja nicht das Problem, eher das Ausblenden unerwünschter...

Edit:
Workaround, der allerdings in der Form wieder unter Chrome zu ungewolltem Verhalten führt... man müsste also das Ignorieren des Events noch an den Browser koppeln...

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sortable demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  
<script type="text/javascript">
var dragStarted = false;

function doClick() {
	if (dragStarted) {
		dragStarted = false;
		return;
	}
	alert("Hallo Welt!");
}
</script>
  
</head>
<body>
	
	
 
<ul id="sortable">
  <div onClick="doClick()">Item 1</div>
  <div onClick="doClick()">Item 2</div>
  <div onClick="doClick()">Item 3</div>
  <div onClick="doClick()">Item 4</div>
</ul>
 
<script>$("#sortable").sortable({
  start: function( event, ui ) { dragStarted = true; },
});</script>
 
</body>
</html>

Ciraxis · 21. Februar 2013

e.preventDefault()? Und dann selber definieren was passiert?

1668mib · 21. Februar 2013

Die Frage ist doch zu wissen, wann das Event verhindert werden muss... der Weg ist nicht das Problem...

rony12 · 21. Februar 2013

dein workarround scheint keine schlechte lösung zu sein - ich habe das script von dir gerade mal ausprobiert.
Welches "verhalten" hast du unter chrome denn festgestellt?

edit: ansonsten hatte ich schon gedacht, für den firefox einfach einen extra bereich zu machen, der keinen onklick hat - da soll man dann einfach "anfassen" und verschieben.

ice-breaker · 21. Februar 2013

Warum soll so ein draggable Feld überhaupt ein onClick Verhalten haben? Das es da zu Problemen kommt ist doch ganz klar. Wenn ich ein Draggable Feld presse, nicht verschiebe und wieder loslasse ist das ganze eben ein onClick-Event. Also du hast meiner Meinung diesen Fehler selbst provoziert. Du willst eben ein Event extra belegen, welches im Verhalten fast durch das draggable abgedeckt wird (eben das Anklicken, Verschieben, Loslassen ohne das Verschieben).

Mach es doch wie in mobilen Anwendungen: Dein div hat Rechts den kleinen draggable Bereich, der auch nur diese Aufgabe hat und rechts davon ist der normale Bereich. Und du sagst dann das beim Verschieben des draggable der parent div verschoben werden soll (der nur das draggable-div und "real"-div hat).

1668mib · 21. Februar 2013

@rony12: Dass das Script nicht erkennt, dass ein Drag abgeschlossen wurde... dann wird der erste normaler Click unter Chrome ignoriert...

rony12 · 21. Februar 2013

aso, danke - ich muss sagen, dass es mir fast nicht aufgefallen ist ^^.... - hab es aber nur einmal unter chrome probiert.
Ich muss sagen, dass ich das denk ich mal machen werden... ich versuch deine "vorlage" mal bei mir reinzubasteln...

@ice-breaker
ich bin da eccht noch ganz am anfang - ich hab da immer so ideen, die ich gerne umsetzten möchte, und ich denke mal es wäre schlimm zu sagen "das kann ich nicht, ich lasse das..."

Ich kenne sehr viele begrifflichkeiten nicht, und häufig weiß ich garnicht wonach ich suchen muss, weil ich einfach mal anfange

---

Nun hapere ich dgedanklich daran, den "zustand" also die reihenfolge in einer DB zu speichern..... aber ich glaube, da werd ich einen extra thread zu aufmachen

Suche

JavaScript Alternative zu onClick ?

rony12

Commodore

1668mib

Gast

rony12

Commodore

1668mib

Gast

Spike S.

Lt. Commander

1668mib

Gast

Ciraxis

Lieutenant

1668mib

Gast

rony12

Commodore

ice-breaker

Commodore

1668mib

Gast

rony12

Commodore

Ähnliche Themen