相关疑难解决方法(0)

使用jQuery获取鼠标的X/Y坐标单击图像

我想使用jQuery来获取图像上单击事件的X/Y坐标.坐标应该相对于图像,而不是相对于整个页面

jquery

97
推荐指数
4
解决办法
16万
查看次数

使用Bootstrap 3下拉菜单作为上下文菜单

使用Bootstrap 3,如何将下拉菜单放在光标处并从代码中打开?

我需要在表上使用它作为其行的上下文菜单.

jquery twitter-bootstrap twitter-bootstrap-3

69
推荐指数
3
解决办法
9万
查看次数

使用jQuery拖放后如何获取坐标位置?

使用jQuery拖放后如何获取坐标位置?我想将坐标保存到数据库中,以便下次访问时,该项目将处于该位置.例如,x:520px,y:300px?

编辑:

我是PHP和mysql程序员:)

那里有没有教程?

jquery drag-and-drop position save

39
推荐指数
5
解决办法
11万
查看次数

测试光标是否位于textarea的第一行(带有软换行符)

鉴于textarea的内容是这样的

     ––––––––––––––––––––––––––
    | This is some text, which |
    | wraps like this.         |
     ––––––––––––––––––––––––––

如何判断文本光标是否位于textarea的第一行?

显然,\n如果想要查看光标是否出现在第一个换行符之前,检查换行符()是否有效,但测试"软"换行符似乎更具挑战性.

这是一个试验的样本jsFiddle.

我还没有提出一个策略,但我怀疑它可能涉及复制文本直到光标位置进入克隆的textarea(或div),并且只要需要它就使宽度变宽,这样它就不会包装.如果克隆区域的宽度小于原始宽度,则光标似乎必须位于第一行.可能有一个更简单的选择,更优雅的东西,或(最重要的)现有的,经过良好测试的解决方案.

目标浏览器是Webkit(Chrome/Safari)和Firefox.即IE兼容性在这个时候不是一个问题(如果这有任何区别).

谢谢阅读.

编辑:寻找文本插入符号的行号,而不是鼠标光标.

falsarella给出了一个很好的答案,突出了问题的模糊性.我想要的是文本光标("插入符号"可能是一个更好的词)是否在第一行.我已经更新了问题和jsFiddle来反映.

html javascript jquery dom textarea

7
推荐指数
1
解决办法
1486
查看次数

Javascript:获取图像中点击的 X、Y 坐标

这是我的最新问题。

我正在尝试获取用户在图像内单击的位置的 X 和 Y 坐标。无论它在用户窗口中的位置、缩放、滚动位置、窗​​口大小、用户早餐吃什么等,X、Y 坐标都必须只考虑用户在image 但不包括图像在屏幕中的位置,即图像的左上角为 0,0。(希望我能清楚地解释这一点。)

我之所以这么说是因为,在我当前的 JavaScript 函数中,我正在获取某物的 X、Y 坐标,但我不确定到底是什么。我认为这是用户在整个窗口中单击的位置,而不是图像中的位置。这意味着如果图像的位置不同,如果用户已经滚动,如果我将图像移动到页面中的其他位置等,X、Y 坐标会发生变化。这是我当前的 HTML 代码:

<img id="hotspot_image" name="hotspot_image" style="width: 50%" src="misc/pages/hotspotimage.jpg" alt="Hotspot image" onclick="clickHotspotImage(event);"/>
Run Code Online (Sandbox Code Playgroud)

这是我的 Javascript 函数:

function clickHotspotImage(event) {
    var xOffset = document.getElementById('hotspot_image').offsetLeft;
    var xCoordinate = event.clientX;
    var yOffset = document.getElementById('hotspot_image').offsetTop;
    var yCoordinate = event.clientY;
    var hotspotlist = document.getElementById('hotspot_list').value;
    document.getElementById('hotspot_list').value = document.getElementById('hotspot_list').value + '\n' + xCoordinate + ',' + yCoordinate;
}
Run Code Online (Sandbox Code Playgroud)

那里的最后几行代码采用 X,Y 坐标对并将其添加到包含在名为 hotspot_list 的 <textarea> 标记中的列表的末尾。有谁知道我是否在正确的轨道上,或者可以指出我正确的方向,或者知道我需要哪个缺失的部分才能获得真正的 X、Y 坐标?谢谢!

html javascript mouseevent

4
推荐指数
1
解决办法
1万
查看次数

Javascript鼠标单击图像坐标

作业说:"你的任务是写一个包含JavaScript的HTML文件,它将随机显示上面的一个图像.如果页面在浏览器中刷新,你应该得到另一个随机图像." 所以我做到了

现在它说"当用户点击图像上的任何位置时,显示一个警告窗口,显示点击相对于图像的位置的X和Y位置".这是我的代码:

<html>
<head>
<title>Assignment 2</title>
<script type="text/javascript">
  var imageURLs = [
       "p1.jpg"
     , "p2.jpg"
     , "p3.jpg"
     , "p4.jpg"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;
  }
</script>
</head>
<body>
<script type="text/javascript">
  document.write(getImageTag());
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

html javascript image mouseclick-event

3
推荐指数
2
解决办法
2万
查看次数

在Javascript中,为什么getBoundingClientRect()有时返回浮点值?

我正在尝试使用HTML5 canvas元素。我要尝试做的一件事是设置mousemove事件以在画布上跟踪鼠标以进行绘图和其他用途。我还无法找到有关如何获得鼠标悬停在画布上像素的确切坐标的明确答案。我在网上找到了一个使用此html的教程(我在画布上添加了背景色,以使其在渲染的页面上显而易见):

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

      #myCanvas {
        background-color: cornflowerblue;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      canvas.addEventListener('mousemove', function(evt) …
Run Code Online (Sandbox Code Playgroud)

javascript css html5 canvas

3
推荐指数
1
解决办法
1995
查看次数

如何使用 React 17 获取 div(而不是其子项)的鼠标事件的鼠标 X 位置?

我有一个简单的片段,将onMouseMove侦听器附加到给定的 div:

<div onMouseMove={handleMouseMove}>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>
Run Code Online (Sandbox Code Playgroud)

我想知道鼠标指针在我附加鼠标侦听器的父 div 中的 X 位置。然而,该事件似乎只包含对子 div (as target) 和根 (as currentTarget) 的引用。

该事件的nativeEvent属性似乎也没有帮助。

我使用的是 React 17。我认为这使得事情变得更加困难,因为之前会currentTarget指向我放置侦听器的 div,但在 React 17 上,这些侦听器指向根。

如何获取我附加监听器的 div 内的坐标?

谢谢!

javascript mouseevent mousemove reactjs

1
推荐指数
1
解决办法
4314
查看次数