Question

例如，在合成touchEvents中：

onTouchCancel onTouchEnd onTouchMove onTouchStart

documentation列出了这些属性：

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

如何严格使用javascript访问这些属性，例如DOMTouchList targetTouches，而不是jquery？

Answer 1

toggle(e) {
  console.log('e.ctrlKey', e.ctrlKey);
}

对于targetTouches，您可以执行this：

之类的操作

function touches_in_target(ev) {
  // Return true if all of the touches are within the target element;
  // otherwise return false.
  return (ev.touches.length == ev.targetTouches.length ? true : 
  false);
}

Answer 2

您可以从传入事件属性的回调函数中访问事件的这些属性。例如：

onTouchStart={event => { /* accessing metaKey */ console.log(event.metakey) }}

下面是一个实例。我没有使用touchEvents，因为它只适用于移动设备。我从onClick事件访问pageX属性。

const Test = () => <div 
  style={{height: 200, width: 200, backgroundColor: 'red'}}
  onClick={e => console.log(e.pageX)}
/>

ReactDOM.render(<Test />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

如何在React中访问Synthetic事件的属性？

2 个答案: