标签: onmousemove

我在body onmousemove函数上使用这个脚本:

function lineDraw() {
    // Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Clear the last canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

每次我移动鼠标时都应该清除画布,然后绘制一条新线,但它不能正常工作.我试图在不使用jQuery,鼠标监听器或类似工具的情况下解决它.

这是一个演示:https://jsfiddle.net/0y4wf31k/

我有一个占据整个窗口的iframe(100%宽,100%高),我需要主窗口才能检测鼠标移动的时间.

已经onMouseMove在iframe上尝试了一个属性,它显然不起作用.还尝试将iframe包装在div中,如下所示:

<div onmousemove="alert('justfortesting');"><iframe src="foo.bar"></iframe></div>

..它没有用.有什么建议？

在javascript中,在onMouseMove的javascript事件处理器中如何获得x,y中的鼠标位置相对于页面顶部的corrdinates？

在某些情况下,我想onmousemove在鼠标停机时取消事件,例如.是否有可能确定onmousemove事件的方向？jQ或JS是好的.

我有拖拽元素.用户拖动元素.例如,如果元素的底部到达文档中的某个位置(即500px从文档的顶部),则onmousemove停止.如果用户将尝试再次向上拖动元素,则该功能将无法启动.只能向下拖动此元素.所以我认为通过捕捉mousemove事件的方向来做这件事很容易.但似乎没有这种标准属性.

我们假设我们有简单的jQuery代码,如下所示:

var $document = $(document);
$document.ready(function() {
    var $test = $("#test");
    $document.keydown(function(e) {
        e.shiftKey && $test.css("cursor", "pointer");
    });
});

问题是#test如果鼠标指针在#test块上移动,并且按下Shift键,则WebKit不会更改块鼠标光标.但是一旦移动光标,Chrome和Safari就会将光标样式更改为pointer- 完全符合预期但不移动鼠标.这个bug(？)与Firefox无关,我没有在Internet Explorer和Opera下查看它...

那么,有没有人遇到同样的麻烦？也许,有没有解决方法呢？

提前致谢.

第一个版本没有向我显示x和y并得到以下错误:Uncaught TypeError: Cannot read property 'pageX' of undefined第二个版本工作但编码非常相似,找不到问题.

第一版(不工作)

    <form name ="show">
        <input type="text" name="mouseXField" value="0" size="6">Mouse X Position<br>
        <input type="text" name="mouseYField" value="0" size="6">Mouse Y Position<br>
    </form>

        <script type="text/javascript">

        var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;

        if (!mie) {

            document.captureEvents(Event.MOUSEMOVE);
            document.captureEvents(Event.MOUSEDOWN);
        }


        document.onmousemove = mousePos();
        document.onmousedown = mouseClicked();

        var mouseClick;
        var keyClicked;

        var mouseX = 0;
        var mouseY = 0;

        function mousePos (e) {

            if (!mie) {
                mouseX = e.pageX; 
                mouseY = e.pageY; …

嗨开发人员遍布全球.

我想帮助一个简单,纯粹的Javascript (30行),JQuery free (和其他库)的 拖动控制滑块.

我一直在搜索几个月,发现很多脚本,但我不喜欢-Jquery因为大多数脚本需要4,5,6个javascript包括..我更喜欢较小的基本脚本..我喜欢调整它们就像我想要的我也可以从较小的脚本中精益求精.

我只需要一个简单的滑块,我可以用它:重新缩放图像,滚动页面,改变图像亮度(使用PHP)等.

我是新手javascript (2个月),这是我现在得到的...对不起的变量名称...

    <script type="text/javascript">  
      _item = null;
      mouse_x = 0;
      drag_x = 0; 
      function move_init() {
        document.onmousemove = _move;
        document.onmouseup = _stop;
      }
      function _stop(){
         _item = null;
      }
      function _move(e){
        mouse_x = document.all ? window.event.clientX : e.pageX;
        if(_item != null){
             _item.style.left = (mouse_x - drag_x) + "px";
        }
      }
      function _move_item(drag)
      {
        _item = drag;
        drag_x = mouse_x - _item.offsetLeft;
      }
move_init();
drag.onmousedown=_move_item();   // Agh.. did'nt figure …

我正在将Delphi 5应用程序移植到D2010,我遇到了一些问题.在一个窗体上是一个带有OnMouseMove事件的TImage组件,当鼠标移动到图像上时,该事件应该更新标签.这在原始应用程序中运行得很好,但是现在OnMouseMove事件会在鼠标悬停在图像上时不断触发,无论它是否在移动,这会导致标签闪烁可怕.

有谁知道造成这种情况的原因以及如何解决这个问题？

Tooltip当鼠标进入特定控件时,是否可以使用光标移动或类似的东西？

我试过TextBlock,但Margin财产不起作用.

    private TextBlock tooltip = new TextBlock();
    private void imgRoom_MouseEnter(object sender, MouseEventArgs e)
    {           
        Point position = e.GetPosition((IInputElement)sender);
        tooltip.Visibility = System.Windows.Visibility.Visible; 
        tooltip.Margin = new Thickness(position.X, position.Y, 0, 0);           
        tooltip.Width = 100;
        tooltip.Height = 100;
        tooltip.Background = new SolidColorBrush(Colors.Red);
    }

    private void imgRoom_MouseMove(object sender, MouseEventArgs e)
    {
        Point position = e.GetPosition((IInputElement)sender);
        tooltip.Margin = new Thickness(position.X, position.Y, 0, 0);
    }

#box {
  animation: scroll 2s linear infinite;
  width: 100px;
  height: 100px;
  background: red;
}

#box:hover {
  background: green;
}

@keyframes scroll {
  from {transform: none;}
  to {transform: translateX(400px);}
}

<div id="box"></div>

如果将鼠标悬停在方框上,如果之后没有移动鼠标,它将保持绿色.如果将鼠标放在路径中并且不移动,则不会触发悬停.

在这种情况下,是否有一种触发悬停而不移动鼠标的方法？

编辑:不使用JavaScript.