kostenloser Webspace werbefrei: lima-city

Javascript Seite aufrufen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   ultimate-bravery

   ultimate-bravery hat kostenlosen Webspace.

   19:15, 10.4.2014

   Hallo zusammen.
   
   Ich habe mit HTML eine Tabelle erstellt. Diese besteht aus einer Spalte und mehreren Zeilen. In den Zeilen stehen unterschiedliche Sachen und man kann auf die Zeilen drauf klicken. Wenn man auf eine Zeile klickt kommt man entsprechend auf eine andere Seite. Das habe ich bis jetzt so mit Jacascript gelöst:
   
   Javascript:
   

   <script type="text/javascript">
   function switchTo (id) {
   	window.location.href = "neueSeite.php?id="+id;
   }
   </script>

   
   
   Html bzw PHP:
   

   echo "<tr style='background-color:".$bgcolor."; cursor:pointer;' onclick=\"switchTo('".$id."');\">

   
   
   Allerdings stehen in den Zeilen Daten, die da stehen, damit man sie markiert und in die Zwischenablage kopiert. Wenn man also ein Wort aus dieser Zeile markieren will, klickt man ja schon auf die Zeile und dann wird die Seite gewechselt, obwohl man nur etwas kopieren wollte und nicht auf die andere Seite wechseln wollte.
   
   Wie kann ich es also lösen, dass man etwas markieren kann, ohne dass dabei die Seite wechselt. Die Seite soll nur geändert werden, wenn jemand mit einem normalen Mausklick drauf klickt.
   
   Ich würde mich über Hilfe und Tipps freuen.
   Viele Grüße

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   21:00, 10.4.2014

   Ich glaube es gibt dafür keine Lösung, zumindest nicht so, wie du es dir vorstellst.
   
   Dazu ein Beispiel, das zwar etwas anders aufgebaut ist, aber trotzdem das Problem verdeutlicht:
   
   Hier auf dieser Seite gibt es weiter oben ein paar Links, bei einem steht "Die eigene Homepage", das ist gleichzeitig der Linktext. Es ist relativ einfach, den kompletten Linktext zu markieren und in die Zwischenablage zu schicken, ohne dabei den Link auszulösen. Deutlich schwieriger ist es aber, nur das Wort "eigene" zu markieren und in die Zwischenablage zu kopieren. Wenn gleich darüber und darunter auch ähnliche Links stehen würden, wäre es gar nicht möglich
   
   Bei deinem ja nicht ganz vollständigen Codeteil fällt mir aber auf, dass onclick mit dem Element <tr> verknüpft ist. Gibt es auch <td>?
   Was spricht dagegen, die Tabelle so aufzubauen, dass man einerseits den Text hat, der kopiert werden soll/kann und andererseits (z.B. in einer Extra-Spalte) den Link, z.B. als fetten Button?

4. g****e

   17:36, 11.4.2014

   Tricky, aber nicht unmöglich.
   
   Zuerst schauen wir uns mal an, was du unterscheiden möchtest: Klick und Markieren. Doch, was ist das genau?
   Ein Klick ist, wenn die Maustaste runter geht, und direkt wieder hoch, ohne die Maus dabei groß zu bewegen. Markieren hingegen ist ein Vorgang, wo die Maustaste runter geht, die Maus bewegt wird, und dann die Maustaste hoch geht. Das sind zwei ähnliche, aber unterschiedliche Vorgänge.
   
   Um das Markieren musst du dich nicht kümmern, das ist in Ordnung, das macht der Browser. Das Klicken jedoch musst du ein bisschen anders lösen: Ein Mausklick ist die Maustaste senken (mousedown), und schnell dannach, ohne Bewegen wieder hoch (mouseup). Folglich kannst du des so machen:
   
   

   function handleClick() {
       window.location.href = 'newpage';
   }
   
   var elements = document.querySelectorAll('tr');
   element.forEach(function(element, index) {
       var isDown, startX, startY, downTimestamp;
       element.addEventListener('mousedown', function(e) {
           isDown = true;
           startX = e.clientX;
           startY = e.clientY;
           downTimestamp = (new Date()).getTime();
       });
   
       element.addEventListener('mouseup', function(e) {
           // berechne Distanz
           var distance = Math.sqrt( Math.pow(startX - e.clientX, 2) + Math.pow(startY - e.clientY, 2));
           if (isDown && distance < 5 && downTimestamp > (new Date()).getTime() - 100) {
               //wenn die maus über diesem element runter gegangen ist, die maus nicht mehr als 5 Pixel bewegt wurde, und schneller als 100ms wieder gehoben wurde, dann war es ein klick
               handleClick();
           }
           // alles zurücksetzen
           startX = startY = 0;
           isDown = false;
        });
   });

   
   Um jetzt deine ID unterzubringen kannst du noch sowas machen wie:
   

   echo "<tr style='background-color:".$bgcolor."; cursor:pointer;' myLinkId='".$id."'>";

   
   du schreibst also ein eigenes Attribut auf das Element, und liest es dann mit:
   

   element.getAttribute('myLinkId');

   
   wieder aus. Damit solltest du Klick und Markieren eigentlich auseinander halten können. Ist es kein Klick ist die Maus länger unten und bewegt sich, das wiederum wird ganz normal vom Browser behandelt. Dein Klick feuert nur unter den gegebenen Voraussetzungen.
   
   Liebe Grüße
   
   PS: Ungetestet und auf Medikamenten ^^

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?