Question

我正在尝试使用外部链接的确认方法。当您按下链接时，问题应该弹出，询问您是否要离开该网站？一切都按计划进行，除了您离开网站，无论您点击哪个按钮。

function warning(){
  var warning = document.getElementsByClassName("external");
  warning.onclick = confirm('Do you want to leave');

  if(warning){
    alert("Leaving site");

  }
  else{
    return false;
    alert("Staying on site");
  }
}

以上显然不起作用，你是怎么做到的？

Answer 1

warning.onclick = confirm('Do you want to leave');

立即调用confirm() ，并将结果（true或false）分配给onclick（这是毫无意义的）。

相反，您需要创建一个调用confirm()并返回结果的匿名函数。

Answer 2

以上显然不起作用

是。代码中有无数错误：

您的变量warning与该函数同名 - 不良做法会导致混淆
warning.onclick将无效，因为getElementsByClassName返回NodeList，您只能将侦听器附加到单个元素
= confirm('Do you want to leave');直接指定调用confirm的结果。您当然希望分配一个函数，它将在事件发生时调用
if(warning)将永远为真，因为即使空的NodeList也是真实的
return false; alert() - 永远不会执行警报。 return语句会立即跳出该函数。

你怎么做的？

完全没有。阻碍用户做他想做的事的弹出窗口（他想在点击链接时离开网站）是不可取的。这是非常糟糕的UI设计。

Answer 3

jQuery对话框非常适合这个添加代码

warning.onclick = function()
{
 var msg = "do you want to leave this site: ";

 $( "#dialog-confirm" ).html(msg);
 $( "#dialog-confirm" ).dialog({
resizable: false,
title: 'title',
height:300,
modal: true,
buttons: {
    "Ok": function() {
        $( this ).dialog( "close" );
        window.location.href = url;
        },
    "Cancel": function() {
        $( this ).dialog( "close" );
        }
    }
    });
   }

Answer 4

改为：

var boolOK = confirm('Do you want to leave');

if (boolOK == true)
warning.onclick;

这里有更多解释 http://www.javascriptkit.com/javatutors/alert2.shtml

当用户尝试离开我的网页时，创建一个弹出窗口并获得结果

4 个答案: