JavaScript의 속성 확인

Question

저는 JavaScript가 처음이며 오리 입력 개념과 다소 혼동합니다. 내가 알 수있는 한, 나는 그 개념을 이해했다. 하지만 그건 내 생각에 이상한 결과를 가져옵니다. 다음 예제로 설명 드리겠습니다.

저는 현재 jQuery Mobile을 사용하여 모바일 웹 앱을 작성 중입니다. 어느 시점에서 캔버스에 대한 vmousedown 이벤트를 캡처합니다. 터치의 압력에 관심이 있습니다. Touch.webkitForce 속성을 찾았습니다.

$('#canvas').live('vmousedown', function(e){ 
    console.log(e.originalEvent.originalEvent.touches[0].webkitForce); 
} 

Chrome의 경우 Remote Debugging을 사용할 때 문제가 없습니다. 그러나 originalEvent 속성은 터치 이벤트가 아니라 클릭 이벤트이기 때문에 Opera Firefly에서 테스트 할 때 예외가 발생합니다.

그래서 내 권한이없는 개체의 속성에 액세스 할 때마다 존재 여부 및 유형을 확인해야합니까?

if(e.originalEvent && 
    e.originalEvent.originalEvent && 
    e.originalEvent.originalEvent.touches && 
    e.originalEvent.originalEvent.touches[0] && 
    e.originalEvent.originalEvent.touches[0].webkitForce) { 

    console.log(e.originalEvent.originalEvent.touches[0].webkitForce); 
} 

나를 위해 누군가를 명확히 할 수 있습니까?

Answer 1

그래서 내 권한이없는 개체의 속성에 액세스 할 때마다 존재 여부 및 유형을 확인해야합니까?

예를 한 번 한 번에 전체 경로를 확인해야 할 것이다, 또는 당신은 그것을 자동화 할 수 있습니다 :

function deepObject(o, s) { 
    var ss = s.split("."); 

    while(o && ss.length) { 
     o = o[ss.shift()]; 
    } 

    return o; 
} 

var isOk = deepObject(e, "originalEvent.originalEvent.touches.0.webkitForce"); 

if (isOk) { 
    // isOk is e.originalEvent.originalEvent.touches.0.webkitForce; 
} 

---

테스트 케이스 :

var o = { 
    a: { 
    b: { 
     c: { 
     d: { 
      e: { 
      } 
     } 
     } 
    } 
    } 
} 

var a = deepObject(o, "a.b.c"); 
var b = deepObject(a, "d"); 

console.log(a); // {"d": {"e": {}}} 
console.log(b); // {"e": {}} 
console.log(deepObject(o, "1.2.3.3")); // undefined 

Answer 2

사용 캐치를 시도하십시오

$('#canvas').live('vmousedown', function(e) { 
    try { 
     console.log(e.originalEvent.originalEvent.touches[0].webkitForce); 
    } catch(e) { 
     console.error('error ...'); 
    } 
} 

Answer 3

특정 프레임 워크를 사용하여 이벤트를 캡처 할 때 originalEvent가 이고 항상이라고 가정해야한다고 생각합니다. 그렇지 않은 경우 이벤트 캡쳐에서 어딘가에 어떤 것이 분명히 잘못되어 오류가 발생하는 것이 좋습니다.

그러나, 이벤트는 된 MouseEvent 또는 TouchEvent는 또한 webkitForce 속성이 지원되지 않을 수 있습니다 될 수 있습니다. 이것들은 여러분이 탐지하기를 원하는 종류의 경우입니다 :

// assume that originalEvent is always be defined by jQuery 
var originalEvent = e.originalEvent.originalEvent; 
if (originalEvent instanceof TouchEvent) { // if touch events are supported 
    // the 'touches' property should always be present in a TouchEvent 
    var touch = originalEvent.touches[0]; 
    if (touch) { 
     if (touch.webkitForce) { 
     // ... 
     } else { 
     // webkitForce not supported 
     } 
    } // else no finger touching the screen for this event 
} else { 
    // probably a MouseEvent 
}