종이 항목의 링크 : 캡쳐 탭 방지

app-location을 사용하여 URL을 기반으로하는 페이지 집합 중 하나를 표시하고 paper-listbox에 paper-item의 목록을 포함하여 사용 가능한 페이지 목록을 표시합니다. 각 paper-item에는 해당 페이지로 연결되는 링크가 있습니다. 링크를 정상적으로 클릭하면 요청이 app-location에 의해 차단되고 페이지가 다시로드되지 않고 표시됩니다. 링크가 Ctrl + 클릭 또는 가운데 클릭되거나 다른 링크 인 경우 일반 링크처럼 새 탭에서 페이지가 열립니다.종이 항목의 링크 : 캡쳐 탭 방지

내 질문 - 어떻게 표시되는 페이지와 동기화되어 목록 상자에서 선택을 유지할 수 있습니까? 내가 생각할 수있는 모든 것을 시도했지만 아무 것도 작동하지 않습니다.

추가 로직이 없으면 표시된 페이지가 변경되지 않더라도 링크가 작동하지만 paper-item을 클릭하면 선택됩니다. 목록 상자의 selected 속성에 옵저버를 추가하고 적절한 URL을 업데이트 해 보았습니다. 대부분 한 가지 예외로 작동합니다. Ctrl + 새 탭에서 열 링크를 클릭해도 여전히 paper-item이 선택되고 따라서 기존 탭도 변경됩니다.

또한 링크 내에 전체 paper-item을 감싸려고했으나 전혀 도움이되지 않았습니다.

이 문제를 해결할 방법이 있습니까? 유일한 해결책은 자식 링크에서 발생했을 때 paper-item이 탭 이벤트를 캡처하는 것을 중지하는 방법을 찾는 것 같습니다. 그러나 Polymer 소스 코드 자체를 수정하지 않고서는 그렇게 할 수있는 방법을 찾을 수 없습니다.

출처

2017-01-12 Antimony

나는이 작업을 수행 할 수있는 방법을 보여주기 위해 철자 선택기와 함께 CSS를 사용하는 예를 만들었습니다. 그리고 마술은 앵커 요소에 ctrl이 눌려 졌는지 확인하는 이벤트를 가지고 있습니다. 그럴 경우 이벤트가 전달되지 못하게되어 아이템에 집중하지 못하게됩니다.

_onClick: function(e) { 
    if (e.ctrlKey) { 
     console.log('stop propagation'); 
     e.stopPropagation(); 
    } 
}

plunkr

주

,이 또한 작동 할 때 마우스 오른쪽 버튼으로 클릭하고 초점이 항목에 전달되지 않기 때문에, 링크에서 새 탭을 열 것을 선택.

또한 종이 제품 구성 요소를 사용하지 않는다는 것을 알고 있습니다. 나는 똑같은 기술을 시도했지만 효과가 없었습니다. 항상 초점을 맞추는 것처럼 보였습니다.

출처

2017-01-13 01:43:58 edje

아이러니 컬하게도 나는 바로 이것을 처리했습니다 (단, onclick = "..."을 사용하여 이벤트 핸들러를 직접 등록한 경우 제외). 그것은 시도했을 때 종이로 잘 처리되었습니다. 이 방법은 끔찍한 해킹처럼 보이기 때문에 깨끗한 방법이 있었으면 좋겠습니다. – Antimony

종이 항목의 링크 : 캡쳐 탭 방지

답변

관련 문제