différence dans les événements de souris sur img/div

J'ai un petit outil sur une page Web qui peut être cliqué et traîné le long d'une ligne horizontale. J'ai d'abord eu le drag handle comme img. J'ai eu quelques problèmes avec la mise en page et j'ai réalisé plus tard qu'il serait probablement préférable d'utiliser un div avec un fond img.différence dans les événements de souris sur img/div

J'ai donc changé la poignée de glisser pour utiliser un div, et j'ai découvert une erreur assez évidente dans mon code javascript. J'avais les événements onMove et onUp attachés à la poignée elle-même. Ainsi, par exemple, si j'ai cliqué sur la div de poignée de déplacement et que j'ai déplacé ma souris vers le haut hors de la div (comme la div ne bouge que vers la gauche et la droite), elle n'attrape pas les événements onUp ou onMove.

Mais la chose que je ne comprends pas, c'est pourquoi cela a fonctionné parfaitement lorsque j'utilisais une balise img. Est-ce un bug ou y a-t-il quelque chose d'amusant à propos des images qui les fait se comporter de cette façon? Est-il sécuritaire de laisser un code img et de laisser le code tel quel?

Source

2009-11-12 fearofawhackplanet

hmm il semble y avoir plus à ce que je pensais. Je n'ai pas réussi à le recréer avec un exemple simple. J'ai également découvert que le code s'exécute comme prévu (c'est-à-dire que le glissement ne fonctionne pas) dans Mozilla. Je vais enquêter plus loin et faire rapport de demain. – fearofawhackplanet

Quand glisser commence (ou onDown onClick), vous devez réellement attacher dynamiquement onUp et onMove événements document au lieu de poignée. N'oubliez pas d'effacer eux onUp.

Cependant, il devrait y avoir aucune différence entre <img> et <div> dans ce cas .

- EDIT -

Je me suis trompé. Il semble qu'il y ait une légère différence dans la manipulation img et div dans FF depuis FF3. Il vous permet de faire glisser des images sur votre ordinateur, mais nous pouvons le contourner :).

Quoi qu'il en soit, j'ai fait légères modifications à votre script, nettoyé un peu, et il devrait fonctionner maintenant dans tous les navigateurs. Je l'ai testé sur mon ordinateur avec Firefox 3.5.5, Safari 4.0.3, Google Chrome et Opera 10.1.

Cependant, je n'ai pas le moyen de le tester sur IE, veuillez donc rapporter les résultats.

<!DOCTYPE html> 
<html><head><meta charset="utf-8"><title>Page Title</title> 
<script> 
window.onload = function() { //After page is loaded this script will start automaticly 
    var divEl = document.getElementById("myDiv"); // Locate element with id "myDiv" 
    var imgEl = document.getElementById("myImg"); // Locate element with id "myImg" 
    divEl.onmousedown = onDown; // Assign funnction to event mousedown on "myDiv" 
    imgEl.onmousedown = onDown; // Assign funnction to event mousedown on "myImg" 

    function onDown(e) { // Mouse is down, long live the mouse :) 
     $el = this; 
     if (e.preventDefault) { e.preventDefault(e); } // This prevents default "drag image" behaivour 
     window.onmousemove = function(e) { // Assign function onmousemove to window 
      this.onmouseup = function(e) { // When we do a mouseup anywhere on window 
       window.onmousemove = undefined; // We clear onmouse from window 
       window.onmouseup = undefined; // We clear onmouseup from window 
      } 
      /* Part borowed from http://www.quirksmode.org/js/events_properties.html */ 
      if (e.pageX) { posx = e.pageX; } // In case it is a normal browser 
      else if (e.clientX) { // In case it is IE 
       posx = e.clientX + document.body.scrollLeft+document.documentElement.scrollLeft; 
       } 
      /* End of borowed part */ 
      $el.style.left = posx-parseInt($el.offsetWidth)/2+"px"; // Move this element to where mouse is 
     } 
    } 
} 
</script> 
<style> 
    #myImg, #myDiv { display: block; position: relative; left: 0; width: 100px; height: 50px; } 
    #myImg { border: 1px solid red; } 
    #myDiv { border: 1px solid blue; background-color: lime;} 
</style> 
</head> 
<body> 
    <img src="some_image.png" alt="my img" id="myImg"> 
    <div id="myDiv">My div</div> 
</body> 
</html>

Ah, oui. CSS & JS dans cet exemple sont en HTML uniquement à des fins de test. En code réel, il est suggéré de les séparer dans leurs propres fichiers.

Bonne chance :)

Source

2009-11-12 18:09:17 Krule

Je ne suis toujours pas sûr de ce qui cause le comportement d'origine dans IE, mais je l'ai réécrite comme la suggestion de Krule et il y a encore un problème avec Mozilla Gestion des balises img différemment aux balises div . Voici un exemple, fonctionne très bien dans IE, ne fonctionne pas correctement dans Mozilla:

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

var elem = null; 
var downX = null; 
var elemX = null; 

function onDown(e) { 
    var ev = window.event ? window.event : e; 
    elem = window.event ? ev.srcElement : ev.target; 
    downX = ev.clientX; 
    elemX = parseInt(elem.style.left); 
    document.onmousemove = onMove; 
    document.onmouseup = onUp; 
} 

function onMove(e) { 
    var ev = window.event ? window.event : e; 
    elem.style.left = elemX + ev.clientX - downX + "px"; 
} 

function onUp() { 
    document.onmousemove = null; 
    document.onmouseup = null; 
} 


</script> 

<img src="" alt="my img" id="myImg" onmousedown="onDown(event);" style="position:relative; left:0px; width:100px; height:50px; border: solid 1px red;" /> 
<br /> 
<br /> 
<div onmousedown="onDown(event);" style="position:relative; left:0px; width:100px; height:50px; background-color:Lime; border: solid 1px blue;"><div>

Je ne sais pas s'il y a un moyen de modifier ce comportement, ou si je vais devoir tout réécrire encore une fois à Utilisez div au lieu de img.

Source

2009-11-13 12:30:35 fearofawhackplanet

J'ai ajouté ** quelques ** modifications à votre code. Il devrait se comporter correctement maintenant. – Krule

différence dans les événements de souris sur img/div

Répondre

Questions connexes