0

サンプルコードがあります：

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 が実行されません。修正方法を教えてください。

4

2 に答える 2

0

コードを少し変更して作成したこの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は正しくダウンロードされていますか？

どのブラウザを使用していますか？

于 2012-11-15T03:47:20.797 に答える
0

ボタンのスタイル。あなたのコード:

width:27px;height:20px;

私はに変わります

width:60px;height:50px;

IE9で試してみました。

于 2012-11-15T03:41:47.707 に答える