(Translator 's Note :이 기사는 Ctrl 키를 누를 때 JS를 사용하여 새 페이지를 열는 문제를 해결합니다)
단순화 된 HTML5 사양에서, 다중 DIV 및/또는 기타 블록 레벨 요소가 A 태그에 포함될 수 있습니다. 이제 블록 요소를 <a> 태그로 래핑하면 JavaScript 및 Call Window.location으로 원래들을 필요가있는 문제를 해결하여 페이지 리디렉션 기능을 달성 할 수 있습니다.
그러나 <a> 태그를 사용한이 랩핑 양식도 잘 작동하지 않습니다. 예를 들어 블록 요소에는 <a> 태그가 있습니다. 이 경우 부모의 <a> 이외의 다른 부분을 클릭하면 주어진 주소로만 점프하려고합니다.
물론 다음과 같은 간단한 청취자를 사용하면 우리의 요구도 달성 할 수 있습니다.
코드 사본은 다음과 같습니다.
dodelement.addeventListener ( 'click', function (e) {
// 모든 URL 주소가 정상이거나 다른 코드를 사용하여 지정할 수 있습니다.
// 여기 에이 요소의`data-src` dom 속성 (속성)이 있습니다.
Window.location = adlement.get ( 'data-url');
});
... 그러나 이것은 때때로 사용자 경험이 좋지 않습니다. CTRL 키 (Mac이 명령 키입니다)를 누르고 마우스를 클릭하면 동일한 (탭) 창에서 링크가 열립니다. 이 문제가 있다는 것을 알고, 당신은 그것을 해결하는 방법을 생각했을 것입니다. 작은 코드를 수정하여이를 달성 할 수 있습니다. 청취자를 고치는 데 시간이 걸리십시오.
코드 사본은 다음과 같습니다.
dodelement.addeventListener ( 'click', function (e) {
// URL을 얻습니다
var url = someElement.get ( 'data-url');
// CTRL 키가 누락되었는지 여부를 결정하십시오
if (e.metakey || e.ctrlkey || e.button === 1) {
Window.open (URL);
} 또 다른 {
Window.location = URL;
}
});
원래 저자는 http://davidwalsh.name/ 웹 사이트 에서이 기능을 구현했으며 페이지 리디렉션에 Window.location을 사용할 때이를 기억해야합니다. 이것은 작은 코드 개선이지만 유용성을 향상시키는 것이 매우 중요합니다!