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



>我有一个示例代码:

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>

当我运行代码时,结果没有运行事件鼠标移动,如何解决?

按钮的样式。您的代码:

width:27px;height:20px;

我改为

width:60px;height:50px;

我在 IE9.It 作品上尝试过。

运行我创建的这个 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一起正常工作。

您的浏览器控制台中是否有任何错误?

脚本.js是否正确下载?

您使用的是什么浏览器?

相关内容

最新更新