복붙노트

[JQUERY] ()에서는 event.preventDefault 사용 후 이벤트를 트리거하는 방법

JQUERY

()에서는 event.preventDefault 사용 후 이벤트를 트리거하는 방법

해결법

  1. 1.아니. 이벤트가 취소 된 후에는 취소됩니다.

    아니. 이벤트가 취소 된 후에는 취소됩니다.

    당신은 당신의 사용자 지정 코드가 이미 실행하거나하지 여부를 결정하는 플래그를 사용하지만의 이벤트 후 불을 다시 할 수 있습니다 - 이와 같은 (뻔뻔스러운 공간 오염을 무시하십시오) :

    var lots_of_stuff_already_done = false;

$('.button').on('click', function(e) {
    if (lots_of_stuff_already_done) {
        lots_of_stuff_already_done = false; // reset flag
        return; // let the event bubble away
    }

    e.preventDefault();

    // do lots of stuff

    lots_of_stuff_already_done = true; // set flag
    $(this).trigger('click');
});

    (전역 네임 스페이스 오염을 피할 수있는 추가 혜택과 함께) 더 일반화 변형 될 수있다 :

    function onWithPrecondition(callback) {
    var isDone = false;

    return function(e) {
        if (isDone === true)
        {
            isDone = false;
            return;
        }

        e.preventDefault();

        callback.apply(this, arguments);

        isDone = true;
        $(this).trigger(e.type);
    }
}

    용법:

    var someThingsThatNeedToBeDoneFirst = function() { /* ... */ } // do whatever you need
$('.button').on('click', onWithPrecondition(someThingsThatNeedToBeDoneFirst));

    약속을 지원하는 보너스 슈퍼 최소한의 jQuery 플러그인 :

    (function( $ ) {
    $.fn.onButFirst = function(eventName,         /* the name of the event to bind to, e.g. 'click' */
                               workToBeDoneFirst, /* callback that must complete before the event is re-fired */
                               workDoneCallback   /* optional callback to execute before the event is left to bubble away */) {
        var isDone = false;

        this.on(eventName, function(e) {
            if (isDone === true) {
                isDone = false;
                workDoneCallback && workDoneCallback.apply(this, arguments);
                return;
            }

            e.preventDefault();

            // capture target to re-fire event at
            var $target = $(this);

            // set up callback for when workToBeDoneFirst has completed
            var successfullyCompleted = function() {
                isDone = true;
                $target.trigger(e.type);
            };

            // execute workToBeDoneFirst callback
            var workResult = workToBeDoneFirst.apply(this, arguments);

            // check if workToBeDoneFirst returned a promise
            if (workResult && $.isFunction(workResult.then))
            {
                workResult.then(successfullyCompleted);
            }
            else
            {
                successfullyCompleted();
            }
        });

        return this;
    };
}(jQuery));

    용법:

    $('.button').onButFirst('click',
    function(){
        console.log('doing lots of work!');
    },
    function(){
        console.log('done lots of work!');
    });

  2. 2.허용 대답의 최신 버전.

    허용 대답의 최신 버전.

    문자 버전 :

    $('#form').on('submit', function(e, options) {
    options = options || {};

    if ( !options.lots_of_stuff_done ) {
        e.preventDefault();
        $.ajax({
            /* do lots of stuff */
        }).then(function() {
            // retrigger the submit event with lots_of_stuff_done set to true
            $(e.currentTarget).trigger('submit', { 'lots_of_stuff_done': true });
        });
    } else {
        /* allow default behavior to happen */
    }

});

    이 작품은, 그러나 당신이 양식을 제출하기 전에 이메일 주소 확인 같은 것을 추가하여 양식을 강화하도록 요청했습니다 몇 가지 기존 형태의 코드가있을 수 있습니다 어디 이런 일에 대한 좋은 활용 사례입니다. 대신 백엔드 형태의 포스트 코드를 통해 파고, 당신은 API를 작성하고 다음은 기존의 POST의 할 양식을 허용하기 전에 먼저 API를 칠 프런트 엔드 코드를 업데이트 할 수있다.

    그렇게하려면, 당신은 내가 여기에 쓴 것과 비슷한 코드를 구현할 수 있습니다 :

    $('#signup_form').on('submit', function(e, options) {
    options = options || {};

    if ( !options.email_check_complete ) {

        e.preventDefault(); // Prevent form from submitting.
        $.ajax({
            url: '/api/check_email'
            type: 'get',
            contentType: 'application/json',
            data: { 
                'email_address': $('email').val() 
            }
        })
        .then(function() {
            // e.type === 'submit', if you want this to be more dynamic
            $(e.currentTarget).trigger(e.type, { 'email_check_complete': true });
        })
        .fail(function() {
            alert('Email address is not valid. Please fix and try again.');
        })

    } else {

        /**
             Do traditional <form> post.
             This code will be hit on the second pass through this handler because
             the 'email_check_complete' option was passed in with the event.
         */

        $('#notifications').html('Saving your personal settings...').fadeIn();

    }

});

  3. 3.당신처럼 뭔가를 할 수

    당신처럼 뭔가를 할 수

    $(this).unbind('click').click();

  4. 4.이 같은 isDefaultPrevented 속성을 재정의합니다 :

    이 같은 isDefaultPrevented 속성을 재정의합니다 :

    $('a').click(function(evt){
  evt.preventDefault();

  // in async handler (ajax/timer) do these actions:
  setTimeout(function(){
    // override prevented flag to prevent jquery from discarding event
    evt.isDefaultPrevented = function(){ return false; }
    // retrigger with the exactly same event data
    $(this).trigger(evt);
  }, 1000);
}

    IMHO,이 정확히 같은 데이터와 이벤트를 다시 트리거의 가장 완벽한 방법입니다.

  5. 5.이 이벤트의 currentTarget를 사용하는 것이 가능하다. 양식을 작성하는 방법을 예 쇼 제출합니다. 마찬가지로 당신은 온 클릭 속성 등으로부터 기능을 얻을 수

    이 이벤트의 currentTarget를 사용하는 것이 가능하다. 양식을 작성하는 방법을 예 쇼 제출합니다. 마찬가지로 당신은 온 클릭 속성 등으로부터 기능을 얻을 수

    $('form').on('submit', function(event) {
  event.preventDefault();

  // code

  event.currentTarget.submit();
});

  6. 6.그냥) e.preventDefault을 (수행하지 않는, 또는 조건을 수행합니다.

    그냥) e.preventDefault을 (수행하지 않는, 또는 조건을 수행합니다.

    원래 이벤트 조치가 발생할 때 당신은 확실히 변경할 수 없습니다.

    당신은 몇 시간 후 (예를 들어, Ajax 요청에 대한 콜백에서) 원래 UI 이벤트 "재 작성"원하는 경우에 당신은 비록 내가 좋겠 ... 가짜 다른 방법으로 (같은 vzwick의 대답)해야합니다 이러한 접근의 유용성에 의문을 제기.

  7. 7.더 최근의 대답은 능숙) (jQuery.one를 사용

    더 최근의 대답은 능숙) (jQuery.one를 사용

    $('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

    https://stackoverflow.com/a/41440902/510905

  8. 8.이 절대적으로 불필요한 비동기 일을하지 않는 긴 "물건을 많이"한 - 이벤트 때문에 부모 요소에 프로그래머는 onklick 이벤트의 경우이가 onclik- 후 실행됩니다, 순서에 그의 방법에 모든 핸들러를 호출합니다 아이의 경우는 완전히 처리했다. 자바 스크립트는 차종은 이벤트 처리이 켜지지을 "중지"는 여기에 "멀티 스레딩"어떤 종류의 일을하지 않습니다. 결론 : 이벤트가 그냥 이해가되지 않습니다 동일한 핸들러에서 재개 "일시 중지".

    이 절대적으로 불필요한 비동기 일을하지 않는 긴 "물건을 많이"한 - 이벤트 때문에 부모 요소에 프로그래머는 onklick 이벤트의 경우이가 onclik- 후 실행됩니다, 순서에 그의 방법에 모든 핸들러를 호출합니다 아이의 경우는 완전히 처리했다. 자바 스크립트는 차종은 이벤트 처리이 켜지지을 "중지"는 여기에 "멀티 스레딩"어떤 종류의 일을하지 않습니다. 결론 : 이벤트가 그냥 이해가되지 않습니다 동일한 핸들러에서 재개 "일시 중지".

    이 비동기 뭔가는 "물건을 많이"경우는 그들이 (asynchonous 물건)과 모든 순서처럼 우리가 내 첫 번째 단락에 돌아올 곳 (그들 bahave해야 일을 할 수 asynchonous 것을 방지로도 이해가되지 않습니다 )

  9. 9.접근 방식의 I 사용은 이것이다 :

    접근 방식의 I 사용은 이것이다 :

    $('a').on('click', function(event){
    if (yourCondition === true) { //Put here the condition you want
        event.preventDefault(); // Here triggering stops
        // Here you can put code relevant when event stops;
        return;
    }
    // Here your event works as expected and continue triggering
    // Here you can put code you want before triggering
});

  10. 10.허용되는 솔루션 못해 작업은 경우에 당신은 앵커 태그로 노력하고 있습니다. 이 경우 당신이 e.preventDefault를 호출 한 후 다시 링크를 클릭 할 수 실 거예요 (). 그게 전부 jQuery를에 의해 생성 된 클릭 이벤트는 기본 브라우저 이벤트의 상단에 불과 층이기 때문이다. 링크를 따라 실 거예요 앵커 태그에 '클릭'이벤트를 트리거 그래서. 대신 당신은 당신이 기본 브라우저 이벤트를 시작 할 수 JQuery와 - 시뮬레이션과 같은 라이브러리를 사용할 수 있습니다.

    허용되는 솔루션 못해 작업은 경우에 당신은 앵커 태그로 노력하고 있습니다. 이 경우 당신이 e.preventDefault를 호출 한 후 다시 링크를 클릭 할 수 실 거예요 (). 그게 전부 jQuery를에 의해 생성 된 클릭 이벤트는 기본 브라우저 이벤트의 상단에 불과 층이기 때문이다. 링크를 따라 실 거예요 앵커 태그에 '클릭'이벤트를 트리거 그래서. 대신 당신은 당신이 기본 브라우저 이벤트를 시작 할 수 JQuery와 - 시뮬레이션과 같은 라이브러리를 사용할 수 있습니다.

    이에 대한 자세한 내용은이 링크에서 찾을 수 있습니다

  11. 11.또 다른 해결책은 이벤트 리스너에 window.setTimeout을 사용하여 이벤트의 프로세스가 완료되면 코드를 실행하는 것입니다. 같은 뭔가 ...

    또 다른 해결책은 이벤트 리스너에 window.setTimeout을 사용하여 이벤트의 프로세스가 완료되면 코드를 실행하는 것입니다. 같은 뭔가 ...

    window.setTimeout(function() {
  // do your thing
}, 0);

  12. 12.이 주제는 오래 알고 있지만 내가 기여할 수 있다고 생각합니다. 당신이 이미 그 행동을 알고있는 경우는 특정 요소에 핸들러 함수 내의 모든 날짜의 이벤트의 기본 동작을 트리거 할 수 있습니다. 당신은 리셋 버튼의 클릭 이벤트를 트리거 할 때 예를 들어, 당신은 실제로 기본 동작과 가장 가까운 형태의 리셋 함수를 호출합니다. 당신의 핸들러 함수에서에서 preventDefault 기능을 사용 후, 당신은 당신의 핸들러 코드에 가장 가까운 형태의 어느 곳에서 다시 함수를 호출하여 기본 동작을 불러올 수 있습니다.

    이 주제는 오래 알고 있지만 내가 기여할 수 있다고 생각합니다. 당신이 이미 그 행동을 알고있는 경우는 특정 요소에 핸들러 함수 내의 모든 날짜의 이벤트의 기본 동작을 트리거 할 수 있습니다. 당신은 리셋 버튼의 클릭 이벤트를 트리거 할 때 예를 들어, 당신은 실제로 기본 동작과 가장 가까운 형태의 리셋 함수를 호출합니다. 당신의 핸들러 함수에서에서 preventDefault 기능을 사용 후, 당신은 당신의 핸들러 코드에 가장 가까운 형태의 어느 곳에서 다시 함수를 호출하여 기본 동작을 불러올 수 있습니다.

  13. 13.도움이 될 수 있습니다이 예는, 몇 가지 링크에 "사용자 정의 확인 POPIN"를 추가하면 (I, 그것은 콜백을위한 단지 exemple의 "$ .ui.Modal.confirm"의 코드를 유지하는 것이 실행 원래 동작) :

    도움이 될 수 있습니다이 예는, 몇 가지 링크에 "사용자 정의 확인 POPIN"를 추가하면 (I, 그것은 콜백을위한 단지 exemple의 "$ .ui.Modal.confirm"의 코드를 유지하는 것이 실행 원래 동작) :

    //Register "custom confirm popin" on click on specific links
$(document).on(
    "click", 
    "A.confirm", 
    function(event){
        //prevent default click action
        event.preventDefault();
        //show "custom confirm popin"
        $.ui.Modal.confirm(
            //popin text
            "Do you confirm ?", 
            //action on click 'ok'
            function() {
                //Unregister handler (prevent loop)
                $(document).off("click", "A.confirm");
                //Do default click action
                $(event.target)[0].click();
            }
        );
    }
);

    14. from https://stackoverflow.com/questions/7610871/how-to-trigger-an-event-after-using-event-preventdefault by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 자바 스크립트 인쇄 iframe이 내용 만  (0) 2020.10.18
[JQUERY] 크롬 인해 잘못된 MIME 타입에 AJAX 스크립트를 실행하는 것을 거부  (0) 2020.10.18
[JQUERY] URL에서 쿼리 문자열 제거  (0) 2020.10.18
[JQUERY] 어떻게 해제 앵커에 "점프"페이지를로드 할 때?  (0) 2020.10.18
[JQUERY] Base64로로 변환 이미지 URL  (0) 2020.10.18
,

티스토리툴바