Select 图片在 IE 和 Firefox 上失败

Question

为什么我将$(document).mousemove和$(document).mousedown修改为$(".desktop").mousemove和$(".desktop").mousedown时，在IE和firefox中并没有像我期望的那样运行，而是好的 Chrome.

jq.js在html中使用，请通过link

下载

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0033)http://demo.jq22.com/jquery-win7/ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>

 <META http-equiv="Content-Type" content="text/html; charset=utf-8">
 <SCRIPT src="jquery-win7_files/jq.js"></SCRIPT>
 
 <SCRIPT>
  (function($) {
   $.fn.dom = function() { return this[0] ;}
  })($) ;
  function Pointer(x, y) {
   this.x = x ;
   this.y = y ;
  }
  function Position(left, top) {
   this.left = left ;
   this.top = top ;
  }
  function Direction(horizontal, vertical) {
   this.horizontal = horizontal ;
   this.vertical = vertical ;
  }
  $(function() {

   var clientWidth = document.documentElement.clientWidth || document.body.clientWidth ;
   var clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;
   $(".desktop_bg").width(clientWidth).height(clientHeight) ;

   var oldPointer = new Pointer() ;
   var oldPosition = new Position() ;
   var direction = new Direction() ;
   var div = $("<div></div>").css({
    background : "blue",
    position  : "absolute",
    opacity : "0.2"
   }).appendTo($("body")) ;
   var isDown = false ;
   $(".desktop").mousedown(function(e) {
    
    e.preventDefault() ;
    if(div.dom().setCapture) {
     div.dom().setCapture(true) ;
    }
    $("ul li").css("border", "1px solid transparent") ;
    isDown = true ;
    oldPointer.x = e.clientX ;
    oldPointer.y = e.clientY ;
    oldPosition.left = e.clientX,
    oldPosition.top = e.clientY
    div.css({
     left : e.clientX,
     top : e.clientY
    }) ;
   }) ;
   div.extend({
     checkC : function() {
     var $this = this ;
     $("ul li").each(function() {
      if($this.offset().left + $this.width() > $(this).offset().left && 
        $this.offset().left < $(this).offset().left + $(this).width()
         && $this.offset().top + $this.height() > $(this).offset().top 
         && $this.offset().top < $(this).offset().top + $(this).height()) {
       $(this).css("border", "1px solid #90bedb") ;
       } else {
       $(this).css("border", "1px solid transparent") ;
       }
     }) ;
    }
   }) ;
   $(".desktop").mousemove(function(e) {
    if(!isDown) return isDown ;
    if(e.clientX > oldPointer.x) {
     direction.horizontal = "Right" ;
    } else if(e.clientX < oldPointer.x) {
     direction.horizontal = "Left" ;
    } else {
     direction.horizontal = "" ;
    }
    if(e.clientY > oldPointer.y) {
     direction.vertical = "Down" ;
    } else if(e.clientY < oldPointer.y) {
     direction.vertical = "Up" ;
    } else {
     direction.vertical = "" ;
    }
    var directionOperation = {
     LeftUp : function() {
      div.css({
       width : Math.abs(e.clientX - oldPointer.x),
       height : Math.abs(e.clientY - oldPointer.y),
       top : oldPosition.top - Math.abs(e.clientY - oldPointer.y) ,
       left : oldPosition.left - Math.abs(e.clientX - oldPointer.x)
      }) ;
     },
     LeftDown : function() {
      div.css({
       width : Math.abs(e.clientX - oldPointer.x),
       height : Math.abs(e.clientY - oldPointer.y),
       left : oldPosition.left - Math.abs(e.clientX - oldPointer.x)
      }) ;
     },
     Down : function() {
      div.css({
       width : 1,
       height : Math.abs(e.clientY - oldPointer.y)
      }) ;
     },
     Up : function() {
      div.css({
       width : 1,
       height : Math.abs(e.clientY - oldPointer.y),
       top : oldPosition.top - Math.abs(e.clientY - oldPointer.y)
      }) ;
     },
     Right : function() {
      div.css({
       width : Math.abs(e.clientX - oldPointer.x),
       height : 1
      }) ;
     },
     Left : function() {
      div.css({
       width : Math.abs(e.clientX - oldPointer.x),
       height : 1,
       left : oldPosition.left - Math.abs(e.clientX - oldPointer.x)
      }) ;
     },
     RightDown : function() {
      div.css({
       width : Math.abs(e.clientX - oldPointer.x),
       height : Math.abs(e.clientY - oldPointer.y)
      }) ;
     },
     RightUp : function() {
      div.css({
       width : Math.abs(e.clientX - oldPointer.x),
       height : Math.abs(e.clientY - oldPointer.y),
       top : oldPosition.top - Math.abs(e.clientY - oldPointer.y)
      }) ;
     }
    }
    directionOperation[direction.horizontal + direction.vertical]() ;
    div.checkC() ;
    
   }) ;
   $(document).mouseup(function() {
    if(!isDown) return isDown ;
    isDown = false ;
    div.width(0).height(0) ;
    if(div.dom().releaseCapture) {
     div.dom().releaseCapture(true) ;
    }
   }) ;
   
  }) ;
 </SCRIPT>
 
 <STYLE>
  body{ overflow: hidden; padding: 0; margin: 0; background-color: #333333; }
  ul {
   list-style:none;
   padding:0;
   margin:0;
  }
  ul li {
   border:1px solid transparent ;
   padding:5px;
   width:65px;
   height:65px;
   margin:10px;
   text-align:center;
   font:14px/16px "微软雅黑" ;
   color:#fff;
   border-radius:4px;
  }
  .desktop {
   position:absolute;
   left:0;
   top:0;
  }
  img {
   border:none;
  }
 </STYLE>
 </head>
<BODY>
 <DIV class="desktop">
  <UL>
    <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65" 
    src="jquery-win7_files/a1.png"></A></LI>
    <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65" 
    src="jquery-win7_files/a2.png"></A></LI>
    <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65" 
    src="jquery-win7_files/a3.png"></A></LI>
    <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65" 
    src="jquery-win7_files/a4.png"></A></LI>
    <LI><A href="http://www.jq22.com/" target="_blank"><IMG width="65" height="65" 
    src="jquery-win7_files/a5.png"></A></LI>
  </UL>
 </DIV>
</BODY>
</HTML>

Answer 1

if(div.dom().setCapture) {
    div.dom().setCapture(true) ;
}

删除之前的代码后，它工作正常。但是不知道为什么

Select 图片在 IE 和 Firefox 上失败

Select picture failure at IE and Firefox

html

javascript

firefox

internet-explorer

google-chrome