• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Allen Klassen ein Event hinzufügen

MasteR ChieF

MasteR ChieF

Mitglied
Hallo Zusammen

Javascript ist nicht so mein Ding und Google hat auch nicht wirklich geholfen.
Mein Anliegend ist folgendes:

Ich habe Bilder in meinem HTML - Dokument, welche alle ein OnMouseDown und OnMouseUp Event brauchen.

1. bin ich schreibfaul :shock: und
2. können diese Bilder schnell ändern

Alle Bilder haben aber die selbe CSS - Klasse.

Gibt es eine Möglichkeit, dass ich am Anfgan des HTML - Dokuemnts per Javascript dieser gemeinsamen Klasse, dise Events hinzufügen kann??

Danke und Cheers
masterChief
 
Ja, mit getElementsByClassName - und als workaround für ältere Browser:

Code: 
if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        var elements = document.getElementsByTagName("*"),
            elemHasClass = [];
        for(var i=0; i<elements.length; i++) {
            var thisElem = elements[i];
            if(thisElem.className && thisElem.className == className) {
                elemHasClass.push(thisElem);
            }
        }
        return elemHasClass;
    };
}
 
oder umgekehrt und noch schreibfauler:

Code: 
document.onmousedown = function(e) {
if(!e) e = window.event;
var el = e.target || e.srcElement;
if(!el) return;
if(el.className && el.className.test(/\beineKlasse\b/i)){
tu_was();
}
}
 
Ich denke in der Tat, dass es schreibfauler nicht geht :D

Würde aber nicht onmousedown auf document mit sowas verschwenden.
PHP: 
var mouseDown = function(event) {
  if (!event) {
    window.event;
  }
  var node = event.target || e.srcElement;
  if (!node) {
    return;
  }
  if (node.className && node.className.match(/\beineKlasse\b/i)) {
    tu_was.call(this, event);
  }
};
if (document.addEventListener) {
  document.addEventListener("mousedown", mouseDown, false);
} else if (document.attachEvent) {
  document.attachEvent("onmousedown", mouseDown);
}
 
Das ist jetzt alles andere als kürzer, aber falls du weitere JS-Funktionalität einsetzen möchtest, bietet es sich natürlich an, auf ein Framework wie jQuery zu setzen.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>jQuery onmousedown/onmouseup</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            $('.item').bind('mousedown', function () { $(this).css('background-color', 'blue'); })
                      .bind('mouseup',   function () { $(this).css('background-color', 'red' ); })
        });
        //]]>
        </script>
        <style type="text/css">
            .item { width: 50px; height: 50px; background: red; margin: 10px; }
        </style>
    </head>

    <body>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben