javascript - 不允许继续使用 Javascript

Question

所以基本上我想做的是阻止访问提交信息。我通常通过 onsubmit=CheckForm() 执行此操作，如果返回 false，则不会发送数据。 在此代码中，我使用了不同的函数，但没有找到可以返回 false 且不允许继续的方法。

*这些函数基本上是通过警告来说明输入的 URL 是否是有效图像。警报后，它会发送数据。我希望它显示警报，但只是不发送任何内容，只是刷新(例如)。

Javascript:

        var test = function () {
            document.getElementById('image2').src = document.getElementById('image').value;
        }

        var errorCallback = function () {
            alert('Image did not exist');
            return false;
        }

        var loadCallback = function () {
            alert('Image existed');
        }

HTML:

<p style="font-size:20px; font-family:Arial; font-weight:800;">URL to prested Image: </p><input type="text" id="image" name="image" class="URLs" value="http://"/>


        <p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>  
        <img style="display: none" id="image2" onerror="errorCallback()" onload="loadCallback()" />

提前致谢!

Answer 1

Option 1: 在函数中返回false。

通过在 onclick 处理程序中返回 false，它将阻止提交事件发生。

改变:

var test = function () {
  document.getElementById('image2').src = document.getElementById('image').value;
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>  

收件人:

var test = function () {
  document.getElementById('image2').src = document.getElementById('image').value;
  return false;
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="return test()" /></p>  

Option 2: 传递事件处理程序并阻止默认事件的发生。

改变:

var test = function () {
  document.getElementById('image2').src = document.getElementById('image').value;
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="return test()" /></p> 

收件人:

var test = function (e) {
  document.getElementById('image2').src = document.getElementById('image').value;
  e.preventDefault();
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="return test(event)" /></p> 

Option 3: 将 input 更改为 type=button 以不触发提交事件。

改变:

 <p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>  

收件人:

 <p><input type="button" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>