onclick返回false的标签;仍然可以点击

a tag with onclick return false; still clickable

本文关键字：返回 false 标签 onclick      更新时间：2023-09-26

我有一个链接：

<a id="trigger" href="file.pdf" onclick="return false;">Download pdf</a>

和这个Javascript：

// Check validation and enable or disable the <a> tag
if( $('#input_1').hasClass('valid') )
{
    $('#trigger').prop("onclick", null);    
}
else // disable the button
{
    $('#trigger')[0].onclick = function () { return false; }
}

然而，当验证失败时，即使使用，按钮仍然有效

onclick="return false;"

有人能帮助我理解这一点以及如何有效地禁用锚点标签吗？

更新：修复了$('#trigger')[0].onclick = function () { return false; }，但一旦它到达锚标记，按钮仍然为文件下载提供服务。

您需要执行以下操作之一：

$('#trigger')[0].onclick = function () {return false;}

或

$('#trigger').click(function () {return false;});

if( $('#input_1').hasClass('valid') )
{
    $('#trigger').attr("onclick", null);    
}
else // disable the button
{
    $('#trigger').on('click', function(e) { e.preventDefault(); } );
}

最好使用.preventDefault方法
也只对表单控件使用.prop方法。

对于这样的情况，我喜欢让人们更难绕过前端安全。（但只有一点点，但显然这很容易被忽略。）

  1. 如果无效，请调用event.prventDefault（）
  2. 如果无效，请将类添加到元素中。此类将pointer-events设置为none，因此不会注册点击
  3. 检查是否已设置全局JS变量

var valid = false;
$("#valid-checkbox").change(function() {
  var $this = $(this),
    trigger = $("#trigger");
  if ($this.is(":checked")) {
    valid = true;
    $this.val("valid");
    trigger.removeClass("disabled");
  } else {
    valid = false;
    $this.val("invalid");
    trigger.addClass("disabled");
  }
});
$("#trigger").click(function(e) {
  if (valid === false || $(this).hasClass("disabled") || $("#valid-checkbox").val() == "invalid") {
    e.preventDefault();
  }
});
.disabled {
  opacity: 0.5;
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="trigger" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" class="disabled" target="_blank">Download pdf</a>
<input type="checkbox" value="invalid" id="valid-checkbox">
<label for="valid-checkbox">Valid?</label>

相关文章：