Question

我有一个示例代码：

的javascript：

function bootstrap(id) {
   this.id = id;
   this.init = function() {
      document.getElementById(this.id).onmousemove = positionButton;
   }
   function positionButton(e) {
      e = e || window.event;
      var cursor = {x:0, y:0};
      if (e.pageX || e.pageY) {
         cursor.x = e.pageX;
         cursor.y = e.pageY;
      } else {
         cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
         cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
      }
      var elem = document.getElementById(this.id);
      elem.style.position = 'absolute';
      elem.style.top = cursor.y - 10 + 'px';
      elem.style.left = cursor.x - 30 + 'px';
   }
}

在html中：

<div id="button" style="position: absolute; opacity: 1; z-index: 100; width:27px; height:20px; overflow:hidden">
test test
</div>
<script type="text/javascript" src="script.js"></script>
<script>
var bootstrap = new bootstrap('button');
bootstrap.init();
</script>

当我运行代码时，结果没有运行事件mousemove，如何修复它？

Answer 1

按钮的样式。你的代码：

width:27px;height:20px;

我改为

width:60px;height:50px;

我在IE9上试试。它有效。

Answer 2

运行我创建的jsFiddle，稍加修改代码：

    function bootstrap(id) {
        this.id = id;
        this.init = function() {
            document.getElementById(this.id).onmousemove = positionButton;
        };

        function positionButton(e) {
            e = e || window.event;
            var cursor = {
                x: 0,
                y: 0
            };
            if (e.pageX || e.pageY) {
                cursor.x = e.pageX;
                cursor.y = e.pageY;
            } else {
                cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
                cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
            }
            var elem = document.getElementById(this.id);
            elem.style.position = 'absolute';
            elem.style.top = cursor.y - 10 + 'px';
            elem.style.left = cursor.x - 30 + 'px';
        }
    }

var bootstrap = new bootstrap('button');
bootstrap.init();

适用于Chrome，Safari和FFX。

您的浏览器控制台中有任何错误吗？

是否正确下载了script.js？

您使用的浏览器是什么？

使用javascript鼠标在div标签中移动时无法运行onmousemove？

2 个答案: