> 웹 프론트엔드 > JS 튜토리얼 > jQuery: .click()의 잘못된 문제 분석 및 소개

jQuery: .click()의 잘못된 문제 분석 및 소개

黄舟
풀어 주다: 2017-06-27 10:07:56
원래의
2038명이 탐색했습니다.

이 글은 jQuery에서 $("a").click()의 잘못된 문제에 대한 분석을 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.

오늘은 form을 xls로 내보낼 때 앞쪽에 책상에서 . 그러나 실패했습니다. 드디어 이 파일을 찾았습니다.

사용자가 a 태그를 클릭하는 기능을 시뮬레이션하기 위해 jQuery를 사용하여 여러 번 시도했지만 성공하지 못했으며 오랫동안 고민했습니다. 얼마전 멍하니 있다가 새로운 아이디어가 나와서 테스트를 시작하게 되었습니다.

먼저 아래 코드를 보세요:

<html>
<
head
>磨途歌-A标签测试1<head>
<body>
   <a href="http://blog.mo2g.com">磨途歌<a>
</body>
</html>
<script src="http://ajax.google
api
s.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script>
<script>
jQuery(function($) {
  //给所有A标签绑定点击触发
事件
  $(&#39;a&#39;).click(function() {
    alert(1);
  });
  //触发所有A标签的点击事件
  $(&#39;a&#39;).click();
});
</script>
로그인 후 복사

위의 코드는 실제로 라벨 A의 클릭 이벤트를 발생시켰습니다. 하지만 모두들 질문이 있을 것입니다. 왜 라벨 A를 클릭했지만 라벨 A의 점프 이벤트를 발생시키지 않았을까요?

처음에는 브라우저가 A 태그에 대한 JS 작업을 차단하기 위해 해당 보안 조치를 취했기 때문이라고 생각했습니다. 나중에 이것이 사실이 아니라는 것을 알게 되었습니다.

설명에 앞서 먼저 질문 하나 드리겠습니다. "A 레이블"을 클릭할 때 점프가 발생하도록 하려면 정확히 무엇을 클릭했습니까?

1) "A 태그" 자체가 클릭되었나요?

2) "A라벨"에 표시된 텍스트를 클릭하셨나요?

이렇게 말하면 위 코드에서 A 레이블 자체를 클릭해도 지정된 링크로 이동하는 이벤트가 발생하지 않는다는 것을 모두가 이해해야 합니다. 즉, 일반적으로 A 레이블의 텍스트를 클릭합니다.

이제 아이디어가 생겼으니 시도해 보겠습니다.

 <html>
<head>磨途歌-A标签测试2<head>
<body>
   <a href="http://www.mo2g.com">磨途歌<a>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script>
<script>
jQuery(function($) {
  var mo2g = &#39;<span id="mo2g">磨延城<span>&#39;;
  //给A标签中的文字添加一个能被jQuery捕获的元素
  $(&#39;a&#39;).append(mo2g);
  //模拟点击A标签中的文字
  $(&#39;#mo2g&#39;).click();
});
</script>
로그인 후 복사

이번에 효과가 나옵니다. 따라서 JS를 사용하여 A 라벨을 클릭하는 이벤트를 시뮬레이션하려면 먼저 JS에서 캡처할 수 있는 요소를 추가해야 합니다. A 레이블의 텍스트를 입력한 다음 JS를 사용하여 요소 클릭을 시뮬레이션합니다.

위 내용은 jQuery: .click()의 잘못된 문제 분석 및 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿