打开模态对话框时取消链接按钮的链接事件

Question

我目前的代码如下所示。我想取消此链接事件（href =＆＃34;＃ending＆＃34;）并打开我在点击链接按钮后创建的模态（id =＆＃34; linkconclusion＆＃34;）如果名称和年龄输入是空的。请假设我有模态编码并且工作正常。

目前，点击链接按钮后，模态对话框打开，但页面仍然链接到结论，即链接事件（href =＆＃34;＃ending＆＃34;）仍然发生。有人可以就当前代码的问题提出建议吗？我正在使用bootstrap v3来获取更多信息。以下代码的小提琴是https://jsfiddle.net/1vznjbos/2/

HTML代码：

<input type="text" id="inputname"  placeholder="Input name here">
<input type="text" id="inputage"  placeholder="Input name here">
<a id="linkconclusion" href="#conclusion" class="btn btn-danger">Done</a>  

<div id="conclusion">
   <p id="displayname"></p> 
   <p id="displayage"></p> 
</div>

JavaScript代码：

var a = document.getElementById("linkconclusion");    
        a.onclick = function displaybiometric() {

            //====== CANCEL href="#conclusion" AND OPEN MODAL =========
            var m1 = document.getElementById("inputname").value;
            var m2 = document.getElementById("inputage").value;
            if (m1 == ""){              
                    $('#linkconclusion').click(function() {                     
                        return false; // cancel the event
                    });                         
                document.getElementById("modalforbio").click();                 
            }
            if (m2 == ""){              
                    $('#linkconclusion').click(function() {                     
                        return false; // cancel the event
                    });                         
                document.getElementById("modalforbio").click();                 
            }

           //===== DEFAULT CODE THAT SHOULD RUN ONCLICK OF LINK BUTTON =====
            var wlname = document.getElementById("inputname").value;
            document.getElementById("displayname").innerHTML = wlname;
            var wlage = document.getElementById("inputage").value;
            document.getElementById("displayage").innerHTML = wlage;

}   

解决方案：

我找到了一个解决方案来解决这个问题。只需删除链接标记中的链接事件（href =＆＃34;＃ending＆＃34;），仅在满足条件时添加它。 https://jsfiddle.net/5b00nuee/

Answer 1

将href更新为void(0)会阻止默认操作

<a id="linkconclusion" href="javascript:void(0)" class="btn btn-danger">Done</a>

或

处理点击事件时使用e.preventDefault()。

＆＃13;

＆＃13;

var a = document.getElementById("linkconclusion");
a.onclick = function displaybiometric(e) {
  e.preventDefault();

  //====== CANCEL href="#conclusion" AND OPEN MODAL =========
  var m1 = document.getElementById("inputname").value;
  var m2 = document.getElementById("inputage").value;
  if (m1 == "") {
    $('#linkconclusion').click(function() {
      return false; // cancel the event
    });
    document.getElementById("modalforbio").click();
  }
  if (m2 == "") {
    $('#linkconclusion').click(function() {
      return false; // cancel the event
    });
    document.getElementById("modalforbio").click();
  }

  //===== DEFAULT CODE THAT SHOULD RUN ONCLICK OF LINK BUTTON =====
  var wlname = document.getElementById("inputname").value;
  document.getElementById("displayname").innerHTML = wlname;
  var wlage = document.getElementById("inputage").value;
  document.getElementById("displayage").innerHTML = wlage;

}

＆＃13;

＆＃13;

＆＃13;