onclick이 실행되면 HREF를 비활성화하려면 어떻게해야합니까?

및 속성 이 모두 설정된 앵커가 있습니다 . 클릭하고 Javascript가 활성화되어 있으면 실행 하고 무시 하고 싶습니다 . 마찬가지로 Javascript가 비활성화되었거나 지원되지 않는 경우 URL 을 따르고 . 다음은 JS를 실행하고 동시에 링크를 따라가는 작업의 예입니다 (일반적으로 JS가 실행 된 다음 페이지가 변경됨).HREFONCLICKONCLICKHREFHREFONCLICK

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

이를 수행하는 가장 좋은 방법은 무엇입니까?

Javascript 답변을 기대하고 있지만 작동하는 한 모든 방법을 수락합니다. 특히 PHP로 수행 할 수있는 경우에는 더욱 그렇습니다. 나는 이미 " 자바 스크립트 onclick 함수가 완료 될 수 있기 전에 href 링크가 실행되고 페이지를 리디렉션 "을 읽었 지만 지연 될뿐 HREF완전히 비활성화하지는 않습니다. 또한 훨씬 더 간단한 것을 찾고 있습니다.

onclick속성 에서 return을 먼저 넣으면 편집되지 않은 첫 번째 솔루션을 사용할 수 있습니다 .

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

예 : https://jsfiddle.net/FXkgV/289/

    yes_js_login = function() {
         // Your code here
         return false;
    }

false를 반환하면 기본 작업 (href로 이동)을 방지해야합니다.

편집 : 작동하지 않는 것 같습니다. 대신 다음을 수행 할 수 있습니다.

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

기본 브라우저 동작을 비활성화 preventDefault하고 eventHTML 내에서 전달하기 만하면 됩니다.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

<a href="http://www.google.com" class="ignore-click">Test</a>

jQuery 사용 :

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

JavaScript로

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

원하는 .ignore-click만큼의 요소에 클래스 를 할당 하고 해당 요소를 클릭하면 무시됩니다.

다음과 같은 간단한 코드를 사용할 수 있습니다.

<a href="" onclick="return false;">add new action</a><br>

다음과 같은 이벤트 매개 변수를 전달하면 더 간단합니다.

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}

도움이 될 수 있습니다. JQuery가 필요하지 않습니다.

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

이 코드는 다음을 수행합니다. Google 문서 뷰어에 대한 상대 링크 전달

1. 앵커의 전체 링크 버전을 얻으십시오. this.href
2. 새 창에서 링크를 엽니 다.

따라서 귀하의 경우 이것은 작동 할 수 있습니다.

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

js 함수가 호출 요소에 대한 참조를 필요로하는 일반 URL 또는 자바 스크립트 호출을 대신 처리 할 요소에 대한 템플릿이 필요한 상황을 해결했습니다. 자바 스크립트에서 "this"는 양식 요소 (예 : 버튼)의 컨텍스트에서만 자체 참조로 작동합니다. 나는 버튼이 아니라 일반 링크의 모양 만 원하지 않았습니다.

예 :

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

href 및 onClick 속성은 동일한 값을 갖지만 자바 스크립트 호출 일 때 onClick에 "return false"를 추가합니다. 호출 된 함수에서 "return false"가 작동하지 않았습니다.

이것은 나를 위해 일했습니다.

<a href="" onclick="return false;">Action</a>

제 경우에는 사용자가 "a"요소를 클릭 할 때 조건이있었습니다. 조건은 다음과 같습니다.

다른 섹션에 10 개 이상의 항목이있는 경우 사용자는 다른 페이지로 리디렉션되지 않아야합니다.

다른 섹션에 항목이 10 개 미만인 경우 사용자는 다른 페이지로 리디렉션되어야합니다.

"a"요소의 기능은 다른 구성 요소에 따라 다릅니다. 클릭 이벤트 내의 코드는 다음과 같습니다.

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}