在 Ajax 调用中的 JavaScript 中防止默认行为或标记单击事件

Posted 2023-05-09

【中文标题】在 Ajax 调用中的 JavaScript 中防止默认行为或标记单击事件

【英文标题】：Prevent Default Behavior or A Tag Click Event in JavaScript Inside Ajax Call

【发布时间】：2017-03-18 17:44:05

【问题描述】：

我过去曾使用e.preventDefault() 取消点击事件，但我无法弄清楚为什么它在这种情况下不起作用。我为列中的所有标签分配了一个类名，然后使用document.queryselectorAll(.classname) 获取对它们的引用，然后为每个标签添加一个从服务器获取值的点击事件，如果不满足验证应阻止默认并给用户消息。

(function()
const userName = document.getElementById('FullName').value;

// route
$route = '';
if (CheckDeploy(window.location.origin)) 
    $route = '/x/GetReviewerCheck/';
 else 
    $route = '/servername/s/GetReviewerCheck/';


let ReviewButtons = document.querySelectorAll('.verifyReviewer'); // .verifyReviewer = className of all a tags in table column

for (var i = 0; i < ReviewButtons.length; i++) 
    const ReviewButton = ReviewButtons[i];
    ReviewButton.addEventListener('click', function (e) 
        let newRow = ReviewButton.parentElement.parentElement;
        let AuditorName = newRow.cells[2].innerText;
        let ReviewType = newRow.cells[8].innerText;

        let ReviewTypeID = 0;
        if (ReviewType == 'Peer Review') 
            ReviewTypeID = 3;
         else if (ReviewType == 'Team Leader Review') 
            ReviewTypeID = 4;
        
        else if (ReviewType == 'Supervisor Review') 
            ReviewTypeID = 5;
        

        let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1];

        $.ajax(
            url: $route,
            type: 'POST',
            data:  userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id ,
            success: function (data) 
                // if data is 1, prevent default
                if(data == 1)
                    e.preventDefault();
                    return false;
                
            
        );

    , false);

)();

【问题讨论】：

它不起作用，因为响应是异步的。 e.preventDefault() 只有在ajax调用得到服务器响应后才会执行。

【参考方案1】：

它不起作用，因为响应是异步的。 e.preventDefault() 将仅在 ajax 调用从服务器获得响应后执行。 你可以这样做。

阻止所有操作的默认操作。 等待响应。 如果响应不是 1，则取消绑定 preventDefault()。

我更新了 for 循环，并评论了更改。请检查。

for (var i = 0; i < ReviewButtons.length; i++) 
        const ReviewButton = ReviewButtons[i];
        ReviewButton.addEventListener('click', function (e) 
            let newRow = ReviewButton.parentElement.parentElement;
            let AuditorName = newRow.cells[2].innerText;
            let ReviewType = newRow.cells[8].innerText;

            let ReviewTypeID = 0;
            if (ReviewType == 'Peer Review') 
                ReviewTypeID = 3;
             else if (ReviewType == 'Team Leader Review') 
                ReviewTypeID = 4;
            
            else if (ReviewType == 'Supervisor Review') 
                ReviewTypeID = 5;
            

            let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1];

            $.ajax(
                url: $route,
                type: 'POST',
                data:  userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id ,
                beforeSend:function()
                
                    e.preventDefault(); //Prevent default action for all instances.
                ,
                success: function (data) 
                    // if data is 1, prevent default
                    if(data != 1)
                        $(this).unbind('click'); // Restores the click default behaviour if data != 1
                        return false;
                    

                
            );

        , false);