如何在javascript中找到元素中的光标位置 [英] How do I find the cursor position within an element in javascript

问题描述

已经坚持了一段时间。我可以在这样的鼠标移动中找到光标位置：

  function  myMoveFunction（）
 {
  document  .getElementById（  ImageCaption）。innerHTML =   Coords： + event.x +  ， + event.y; 
} 

 <   asp：ImageButton     id   =  imagebutton1    runat   =  server   宽度  =  512   高度  =  262  
   
  < span class =code-attribute>                                         ImageUrl   =   DrawRoom.aspx？v = 0  
   
                                           OnClick   =  ImageButton_Click   
   
                      < span class =code-attribute>                     onmousemove   =  myMoveFunction（）      /  >  
 <   p  >  <   span     id   =  ImageCaption >  <   / span  >  <   / p  >  

这给了我相对于窗口非常方便，但我需要减去图像的位置。我发现很多代码都让我失去了空白。

  function  FindPosition（oElement）{
  if （ typeof （oElement.offsetParent）！=   undefined）{
  for  （ var  posX =  0 ，posY =  0 ; oElement; oElement = oElement.offsetParent）{
 posX + = oElement.offsetLeft; 
 posY + = oElement.offsetTop; 
} 
  return  [posX，posY]; 
} 
  else  {
  return  [oElement.x，oElement .Y]; 
} 
} 
 

  function  myMoveFunction（）
 {
  var  pos = FindPosition（ document  .getElementbyID（  imagebutton1））; 
  document  .getElementById（  ImageCaption).innerHTML =   Coords： + pos [ 0 ] +  ， + pos [ 1 ]; 
} 

只给我图片标题中的空白

解决方案

< blockquote>你会期待什么？在你的方法 FindPosition 中，你甚至都没有尝试做任何与鼠标相关的事情。



你可以得到鼠标从事件本身的事件参数坐标。最方便的方法是使用jQuery： http://api.jquery.com/mousemove [ ^ ]。



如果你需要学习jQuery（强烈推荐），请参阅：

http://en.wikipedia.org/ wiki / JQuery [ ^ ]，

http://jquery.com [ ^ ]，

http://learn.jquery.com [ ^ ]，

http://learn.jquery.com/using-jquery-core [ ^ ]，

http://learn.jquery.com/about-jquery/how-jquery-works [< a href =http://learn.jquery.com/about-jquery/how-jquery-works/target =_ blanktitle =New Window> ^ ]（从这里开始）。



如果没有任何库，请使用事件对象和事件属性 clientX 和 clientY ：

http://javascript.info/tutorial/mouse-events#mouse-coordinates-clientx-y-pagex-y [ ^ ]。

- SA

Been stuck on this for a while. I can find the cursor position on a mouse move like this:

function myMoveFunction()
{
   document.getElementById("ImageCaption").innerHTML = "Coords: " + event.x + ", " + event.y ;
}

<asp:ImageButton id="imagebutton1" runat="server" Width="512" Height="262"

                    ImageUrl="DrawRoom.aspx?v=0"

                    OnClick="ImageButton_Click"

                    onmousemove="myMoveFunction()"  />
<p><span id="ImageCaption"></span></p>

And this gives me the position relative to the window very handily, but I need to subtract the position of the image. I've found lots of code which returns me blankness.

function FindPosition(oElement) {
    if (typeof (oElement.offsetParent) != "undefined") {
        for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
            posX += oElement.offsetLeft;
            posY += oElement.offsetTop;
        }
        return [posX, posY];
    }
    else {
        return [oElement.x, oElement.y];
    }
}

function myMoveFunction()
{
   var pos = FindPosition(document.getElementbyID("imagebutton1"));
   document.getElementById("ImageCaption").innerHTML = "Coords: " + pos[0]+ ", " + pos[1] ;
}

Gives me only blank in my imagecaption

解决方案

What would you expect? In your method FindPosition, you are not even trying to do anything related to the mouse.

You can get mouse coordinates from the event argument of the event itself. The most convenient way of doing it would be using jQuery: http://api.jquery.com/mousemove[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).

To do it without any library, please use the event object and event properties clientX and clientY:
http://javascript.info/tutorial/mouse-events#mouse-coordinates-clientx-y-pagex-y[^].

—SA

这篇关于如何在javascript中找到元素中的光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！