>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 Ctrl 키를 눌러 새로운 page_javascript 기술을 여는 기능을 구현합니다.

JavaScript는 Ctrl 키를 눌러 새로운 page_javascript 기술을 여는 기능을 구현합니다.

WBOY
WBOY원래의
2016-05-16 16:37:271988검색

(번역자 주: JS를 사용하여 Ctrl 키를 눌렀을 때 새 페이지가 열리는 문제를 해결한 기사입니다)

간단한 HTML5 사양에서는 여러 DIV 및/또는 기타 블록 수준 요소를 A 태그에 포함할 수 있습니다. 이제 블록 요소가 JavaScript를 사용하여 청취하고 window.location을 호출하여 페이지 점프(리디렉션) 기능을 구현하는 데 문제가 있습니다.

그러나 태그를 사용하는 이러한 패키징 형식이 제대로 작동하지 않는 경우가 있습니다. 예를 들어 특정 블록 요소(블록)에 일부 태그가 있는 경우입니다. 를 제외한 상위 항목의 다른 부분을 클릭할 경우에만 해당 주소로 이동합니다.

물론 다음과 같은 간단한 리스너를 사용하여 우리의 요구 사항을 충족할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

someElement.addEventListener('클릭', function(e) {
// URL 주소는 무엇이든 될 수 있으며, 다른 코드를 사용하여 지정할 수도 있습니다.
// 여기서는 요소의 `data-src` DOM 속성이 사용됩니다(attribute)
​ window.location = someElement.get('data-url');
});

...그러나 이것은 때때로 CTRL 키(Mac의 경우 COMMAND 키)를 누른 상태에서 마우스로 클릭하면 동일한(탭) 창에서 링크가 열리는 경우가 있습니다. 이 문제가 있다는 것을 알고 해결 방법을 생각해 보셨을 것입니다. 약간의 코드를 수정하여 이 목표를 달성할 수 있습니다. 서둘러서 리스너를 수리하세요.

코드 복사 코드는 다음과 같습니다.

someElement.addEventListener('클릭', 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을 사용할 때도 이 점을 기억해야 합니다. 이는 작은 코드 개선이지만 사용성 측면에서는 매우 중요한 개선입니다!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.