移動時如何顯示光標？

-1

<!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"> 
     <style> 
      *{margin:0px;padding:0px} 
     </style> 
    </head> 
    <body> 
     <div id="my" style="width:200px;height:150px;background:#f1fada;"> 
      <div id="top" style="background:#f4f4f4;cursor:move">tip</div> 
      <div id="bv"> 
       this is a test 
      </div> 
     </div> 

     <script> 
      function $(o){ 
       return document.getElementById(o); 
      } 
     $("top").onmousedown=function(event){ 


       var x1=event.clientX-$("my").offsetLeft; 
       var y1=event.clientY-$("my").offsetTop; 
       var witchButton=false; 
       if(document.all&&event.button==1){witchButton=true;} 
       else{if(event.button==0)witchButton=true;} 
       if(witchButton) 
       { 
        $("top").onmousemove=function(event){ 
         $("my").style.position="absolute"; 
         $("my").style.left=event.clientX-x1+"px"; 
          $("my").style.top=event.clientY-y1+"px";  
        } 
        $("top").onmouseup=function(){ 
          $("top").onmousemove=null; 
       } 
       } 
      } 

     </script> 
    </body> 
</html>

代碼是正確的，移動時如何顯示光標？

你可以嘗試在你的exploror。

我想問當我移動，光標顯示爲「I」（文本型），不動，

我該怎麼做才能解決？

我嘗試，我使用

$("top").onmousemove=function(event){ 

$("my").style.cursor="move"; 

... 

}

但它沒有效果..

來源

2012-02-23 xujinliang1227

Strange..Its工作對我來說：您可以通過分配這種風格暫時擺脫選擇禁用的所有副作用http://jsfiddle.net/qR7d9/ – Unknown 2012-02-23 03:22:49

刪除我的回答，對不起，我讀你的問題太快，並認爲你正在使用jQuery，完全錯過了你的代碼中的第一個功能:) – 2012-02-23 03:30:05

你必須擺脫瀏覽器的用戶選擇行爲;這是唯一的方法。

<!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"> 
     <style> 
      *{margin:0px;padding:0px} 
      .no-user-select { 
       -moz-user-select: none; 
       -webkit-user-select: none; 
       -ms-user-select: none; 
       cursor:move; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="my" style="width:200px;height:150px;background:#f1fada; "> 
      <div id="top" style="background:#f4f4f4;cursor:move; ">tip</div> 
      <div id="bv"> 
       this is a test 
      </div> 
     </div> 
     gdfgd 

     <script> 
      function $(o){ 
       return document.getElementById(o); 
      } 
     $("top").onmousedown=function(event){ 

       document.getElementsByTagName('body')[0].className = 'no-user-select'; 

       var x1=event.clientX-$("my").offsetLeft; 
       var y1=event.clientY-$("my").offsetTop; 
       var witchButton=false; 
       if(document.all&&event.button==1){witchButton=true;} 
       else{if(event.button==0)witchButton=true;} 
       if(witchButton) 
       { 
        $("top").onmousemove=function(event){ 
         $("my").style.position="absolute"; 
         $("my").style.left=event.clientX-x1+"px"; 
         $("my").style.top=event.clientY-y1+"px";  
        } 
        $("top").onmouseup=function(){ 
         $("top").onmousemove=null; 
         document.getElementsByTagName('body')[0].className = ''; 

       } 
       } 
      } 

     </script> 
    </body> 
</html>

來源

2012-02-23 05:36:30

請嘗試更新你的身體元素的聲明 - 它應該防止文本選擇光標出現：

<body style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;">

來源

2012-02-23 03:34:01

這是好的，有沒有其他可行的方法？ – xujinliang1227 2012-02-23 04:06:28

請看看我的新答案。 – 2012-02-23 05:37:10

移動時如何顯示光標？

回答

相關問題