javascript - 当用户试图离开我的网页时创建一个弹出窗口并获取结果

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() 立即调用，并将结果（真或假）分配给onclick（没有意义）。

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

Answer 2

以上显然行不通

是的。代码中有无数错误：

• 您的变量warning与函数同名 - 不好的做法，因为这会导致混淆
• warning.onclick由于返回 NodeList 将不起作用getElementsByClassName，并且您只能将侦听器附加到单个元素
• = 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