Development Tip

onclick 메서드에서 기본 이벤트 처리를 방지하는 방법은 무엇입니까?

yourdevel 2020. 10. 13. 19:26
반응형

onclick 메서드에서 기본 이벤트 처리를 방지하는 방법은 무엇입니까?


onclick 메서드에서 기본값을 방지하는 방법은 무엇입니까? 사용자 지정 값도 전달하는 방법이 있습니다.

<a href="#" onclick="callmymethod(24)">Call</a>
function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
}

콜백을 반환 false하고 onclick핸들러 에 전달 합니다.

<a href="#" onclick="return callmymethod(24)">Call</a>

function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
    return false;
}

그러나 유지 보수 가능한 코드 를 생성하려면 "인라인 자바 스크립트" (예 : 요소의 태그 내에 직접있는 코드)를 사용하지 말고 포함 된 자바 스크립트 소스 파일 ( 눈에 잘 띄지 않는 자바 스크립트 라고 함 )을 통해 요소의 동작을 수정해야합니다 .

마크 업 :

<a href="#" id="myAnchor">Call</a>

코드 (별도 파일) :

// Code example using Prototype JS API
$('myAnchor').observe('click', function(event) {
    Event.stop(event); // suppress default click behavior, cancel the event
    /* your onclick code goes here */
});

시험

<a href="#" onclick="callmymethod(24); return false;">Call</a>

제 생각에는 대답이 틀 렸습니다! 그는 event.preventDefault();당신이 단순히 거짓을 반환 할 때 물었다 . event.preventDefault();AND event.stopPropagation();호출 합니다!

다음과 같이 해결할 수 있습니다.

<a href="#" onclick="callmymethod(event, 24)">Call</a>
function callmymethod(e, myVal){
    //doing custom things with myVal

    //here I want to prevent default
    e = e || window.event;
    e.preventDefault();
}

이벤트를 포착 한 다음 preventDefault ()로 차단할 수 있습니다-순수 자바 스크립트에서 작동합니다.

document.getElementById("xyz").addEventListener('click', function(event){
    event.preventDefault();
    console.log(this.getAttribute("href"));
    /* Do some other things*/
});

href 태그의 "#"대신 "javascript : void (0)"를 넣으세요.

<a href="javascript:void(0);" onclick="callmymethod(24)">Call</a>

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

<a href="javascript:;" onclick="callmymethod(24); return false;">Call</a>

당신이 사용할 수있는:

event.stopPropagation();

https://dom.spec.whatwg.org/#dom-event-stoppropagation


모든 html 페이지에서 함수 사용법을 return false.

따라서 다음은 함수 자체 만 패치하는 테스트 된 솔루션입니다.

function callmymethod(myVal) {
    // doing custom things with myVal

    // cancel default event action
    var event = window.event || callmymethod.caller.arguments[0];
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

    return false;
}    

이는 href="#"onclick 이벤트 핸들러가 완료된 후 IE6, IE11 및 최신 Chrome이 방문하는 것을 올바르게 방지 합니다.

크레딧 :


요소에 클래스 또는 ID를 부여하고 jquery function unbind ();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });

참고 URL : https://stackoverflow.com/questions/7056669/how-to-prevent-default-event-handling-in-an-onclick-method

반응형