标签: mousemove

我目前正在学习和使用JavaScript和SVG,我是新手.这是我的情景

我有一个div里面有一个SVG.

<div id "O_div">
  <svg>
     <line x1= "0" x2 = "0" y1 ="0" y2 ="0">
     </line>
  <svg>
</div>

现在我想知道相对于我的div的鼠标位置,所以我写了下面的代码

odiv = document.querySelector('#O_div');

XOffset = $(Odiv).position().left;
YOffset = $(Odiv).position().top;

   // And on my mouse move event 
            $('#O_div').mousemove(function(event) {
                var mouseX = event.clientX - XOffset;
                var mouseY = event.clientY - YOffset;
               // Here I am setting my line x and y coordinate equal mouseX and mouseY
               //So that line moves according to mouse move movement.           
            });

它工作正常.但是当我使用查询resizable向我的div添加调整大小功能时出现问题.为了调整我的svg大小,我在其中添加了一个viewBox选项.现在我的svg看起来像这样

<svg viewBox="0 0 450 …

我试图通过"mousemove"在画布上使用鼠标左右方形.

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}
function trevor(pos){
    canvas.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

当我运行它时,什么都没有显示出来.我一直在调整它并且现在已经研究了一段时间,我似乎无法弄清楚什么是错的.再一次,我很抱歉这个完全没有问题!任何帮助都非常感谢.

此外,我正在使用Chrome,如果这有帮助.

编辑:看起来问题是触摸板而不是鼠标.

目标: 即使按下按键也能够响应鼠标移动.

我想修改Three.js的PointerLockControls,以便:如果用户在按下"W"时移动鼠标,则摄像机应继续向前移动,摄像机的方向也应根据鼠标移动而改变.这种情况在正常情况下不会发生.以下是听众:

mousemove事件的监听器:

var onMouseMove = function ( event ) {
    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
    camera.rotation.y-=movementX*0.002;
  };

keydown事件的监听器:

var onKeyDown = function ( event ) {

        case 38: // up
        case 87: // w
            moveForward = true;
            break;
        //keys: a, s, d are handled similarly

        case 32: // space
            if ( canJump === true ) velocity.y += 10;
            canJump = false;
            break;
   }

keyup事件的监听器:

var onKeyUp = function(event){
        case 38: // …

我们有一个带有 Hwndhost 元素的 Wpf 应用程序，用于通过 DirectX 渲染 3D 内容。我们向客户端公开一个“Panel”接口，其中包含 MouseEnter 和 MouseLeave 事件。对于 Hwndhost“面板”，当我们第一次收到 HwndHost.WndProc 的 WM_MOUSEMOVE 事件时，我们模拟 MouseEnter 事件，因为 win32 没有 WM_MOUSEENTER 事件。另外，对于 HwndHost，我们通过 TrackMouseEvent() 请求 WM_MOUSELEAVE 事件，该事件在我们的“面板”界面上模拟 MouseLeave 事件。

问题是，当用户非常快速地将鼠标移动到 HwndHost 面板或从 HwndHost 面板移出时，我们会先收到鼠标移动到的面板的 Enter 事件，然后再收到鼠标移动的面板的离开事件。 当源面板和目标面板都是 wpf 元素时，不会发生这种情况，仅当涉及 hwndhost 元素时。另外，如果有两个 HwndHost 元素彼此相邻，则会发生相同的行为，因此看起来 win32 没有按照消息发生的顺序发送消息。

有谁知道解决这个问题的方法吗？ 如果有一种方法可以让 Win32 按照事件发生的顺序发送事件，那就太好了。

下面是一个示例应用程序，它演示了向调试器输出窗口打印消息的问题：

// App.xaml.cs
using System;
using System.Windows;
using System.Runtime.InteropServices;

namespace WpfHostingWin32Control
{
    public partial class App : Application
    {
        [DllImport("comctl32.dll", EntryPoint = "InitCommonControls", CharSet =         CharSet.Auto)]
        public static extern …

我有这个小提琴http://jsfiddle.net/JqBZb/193/我希望我的对象仅在按下红色方块时移动，但是当用户释放鼠标时我无法删除 mousemove 操作。在那之后它仍然会移动。

HTML：

<div class="pointer">
    <div class="marker"></div>
</div>

CSS：

.marker {
    background:#ED1C24;
    height:2px;
    right:0;
    position:absolute;
    top:35px;
    width:7px
}
.pointer {
    height:72px;
    position:absolute;
    top:82px;
    width:72px;
    border:1px solid red;
 left:100px;
}

爪哇脚本：

var img = $('.pointer');

var offset = img.offset();

function mouse(evt) {
    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = …

我正在尝试mousemove使用 jQuery手动触发事件。演示在这个小提琴http://jsfiddle.net/qJJQW/

从 Stack Overflow 上的其他类似帖子来看，这似乎应该有效。为什么不是？

我正在尝试使用 js 滑块slick，但是当我在我的网站上包含滑块代码时，默认的“可拖动”选项不起作用。更具体地说，我无法在幻灯片 div 或网页 (Chrome) 中的文档上捕获任何 mousemove 事件。

在本地运行代码时，我可以毫无问题地观察 'mouseup'、'mousemove' 和 'mouseup' 事件，但是当我将滑块代码放入网页时，我只能观察到 'mouseup' 和 'mousedown' 事件.

下面是工作的本地代码。如果您运行它，它将在滑块 div 内记录 mousedown、mousemove 和 mouseup 事件。

当我将相同的代码移动到网站时，我无法观察到来自滑块 div 或文档的任何 mousemove 事件。是否有一些 js 已经在运行，可以完全阻止页面触发 mousemove 事件？

<html>
  <head>
      <title>My Now Amazing Webpage</title>

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
      <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
  </head>
  <body>

  <style>

    #container {
      width: 450px;
      height: 300px;
      margin: 0 auto;
      border: 2px solid black;
    }

  </style>

  <div id="container">
    <div class="your-class">
      <div><img src="http://lorempixel.com/300/300" /></div>
      <div><img …

我正在尝试创建一个具有以下效果的页面：

。

我是对的，直到我尝试为其添加背景。我习惯了 Photoshop（带有图层和蒙版），但不幸的是 html 没有蒙版。

这是我所拥有的。

小提琴

jQuery：

$(document).ready(function() {
  // calculate screen size
  var pageHeight = $(window).height();
  var pageWidth = $(window).width();

  $(window).on('mousemove', function(event) {
    // horizontal offset
      // 100% = completely dependable on mouse position
    var differenceFactor = 5;
    var mouse_x = event.pageX + 1
    var mouse_xPercentage = 100 / (pageWidth / mouse_x);
    var transformX = (mouse_x * -1) / (100 / differenceFactor) - (pageWidth);
    var actualTransform = transformX;

    // vertical offset
    // base degrees
    var …

我在IntelliJ IDE中使用该代码创建了Java文件

import java.awt.AWTException;
import java.awt.MouseInfo;
import java.awt.Robot;

public class JavaRobotExample {
    public static void main(String[] args) {
        int x = 12,
                y = 300;
        try {
            Robot robot = new Robot();
            robot.mouseMove(x, y);

            int xAct = (int)    MouseInfo.getPointerInfo().getLocation().getX(),
                    yAct = (int) MouseInfo.getPointerInfo().getLocation().getY();

            String sPred = String.format("Predicted mouse location : %, d, %, d", x, y),
                    sAct = String.format("Actual mouse location : %, d, %, d", xAct, yAct);

            System.out.println(sPred);
            System.out.println(sAct);
        } catch (AWTException e) {
            e.printStackTrace();
        }
    }
}

该示例在Windows …

我如何在指针事件无div上触发mousemove事件，我无法编辑页面的html，只能编辑javascript（银行）

<h1>title</h1>
<div class="wrapper">
  <h3>element 1</h3>
  <h3>element 2</h3>
</div>

该脚本当前仅触发主体作为目标，而不是元素

document.body.addEventListener("mousemove", function(e) {
  console.log(e.target)
})

https://codepen.io/anon/pen/PxOMQL