javascript - 如何强制禁用模式或按钮？

Question

当我的用户为只读时，我想限制某些访问。在这种情况下，编辑笔记的能力。我无法解释为什么使用这段代码，当用户处于只读状态时我仍然可以打开我的笔记

if(codeParam == '{{ $baby->readOnlyCode }}' ) {

    //I am in side this code 
    $("a.btn, .btn-link, #logNote, pre, .btn").click(function() {
        return false; 
    });
}

https://mybabies.app/baby/797b808a-e8c6-4a83-acf4-14ebe1f776b1?code=rithys4k

请点击备注框，你会看到它仍然可以触发。

我什至尝试在 showModal() 中添加检查并返回 false

function showModal(val, type, logId ) {

    console.log("val, type, logId",val, type, logId);


    if(codeParam == '{{ $baby->readOnlyCode }}' ) {
       return false; 
    }

    ...

或尝试preventDefault

if(codeParam == '{{ $baby->readOnlyCode }}' ) {
    $("a.btn, .btn-link, #logNote, pre, .btn").click(function(e) {
        e.preventDefault(); 
        return false; 
    });
}

如果您发现我遗漏了什么，请告诉我。

Answer 1

您遇到的问题是您附加了第二个事件监听器，它仅返回 false 并防止默认，但是弹出模态的第一个事件监听器是仍然附着。

即，

$("a.btn").click(function(e) {
    alert("Hello World!");

});

$("a.btn").click(function(e) {
    return false; // this does nothing to the previously attached event listener

});

可能的解决方案:

通过检查您的代码，您有一些选择:

$(document).on('show.bs.modal', '#noteModal', function (e) {
    // move the check for the param here
    if(codeParam == 'rithys4k' ) {
        return false; 
    }
});

或者:在只读模式下，在按钮/链接上使用 disabled 属性。

为您提供更多背景信息 - $().click() 实际上只是 addEventListener 的简写在点击事件上