javascript-events - 无法从mousemove事件获取鼠标指针信息 - Thinbug

无法从mousemove事件获取鼠标指针信息

时间：2016-09-22 00:53:39

标签： javascript-events dart polymer dart-polymer mousemove

在普通的JS Polymer中，我可以做类似this的事情：

<dom-module id="my-module">
  <template>
    <div on-mousemove="mousemove">Text here!</div>
  </template>
  <script>
    Polymer({
      is: 'my-module',

      mousemove: function (event) {
        console.log(event);
      }
    });
  </script>
</dom-module>

这将打印包含鼠标指针坐标的鼠标移动事件。

但是，请考虑以下Dart项目：

pubspec.yaml

name: example
description: "stuff here"
version: 0.1.0
dependencies:
  polymer: ^1.0.0-rc.18
  web_components: ^0.12.0
  browser: ^0.10.0
transformers:
- polymer:
    entry_points:
    - web/index.html

网/ index.dart

library photon.index;

import 'package:example/test.dart';

export 'package:polymer/init.dart';
import 'package:polymer/polymer.dart';

幅/ index.html中

<head>
  <script src="packages/web_components/webcomponents-lite.min.js"></script>
  <script src="packages/web_components/dart_support.js"></script>
</head>
<body unresolved>
  <my-module></my-module>

  <script type="application/dart" src="index.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>

LIB / test.dart

@HtmlImport('test.html')
library example.test;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;

@PolymerRegister('my-module')
class MyModule extends PolymerElement {
  MyModule.created() : super.created();

  @reflectable
  void mousemove(event, [_]) {
    print(event);
  }
}

LIB /的test.html

<dom-module id="my-module">
  <template>
    <div on-mousemove="mousemove" id="target">Text here!</div>
  </template>
</dom-module>

这大致相当于JavaScript版本。但是，这将打印CustomEventWrapper的实例，该实例缺少有关光标所在位置的信息。有没有办法访问鼠标指针信息？

1 个答案:

答案 0 :(得分：1)

这应该有效

  @reflectable
  void mousemove(CustomEventWrapper event, [_]) {
    MouseEvent mouseEvent = event.original;
    print('x: ${mouseEvent.client.x}');
    print('y: ${mouseEvent.client.y}');
  }