Javascript 中的函数返回行为

Posted 2023-03-13

【中文标题】Javascript 中的函数返回行为

【英文标题】：Function Return Behavior in Javascript

【发布时间】：2014-09-22 15:21:36

【问题描述】：

我有一个<a href='...'>link</a>，如果他们单击它，我想调用自定义警告，然后选择“确定”或“取消”按钮，html 中的底层将采取适当的操作。如果“确定”则默认操作，如果“取消”则不执行任何操作。

HTML代码中的代码是：

<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
</div>
</div>

<a href='sumcodehere' return onclick=\"javascript: return Warn.render(\'This operation cannot be reversed.\')\"><img></a>

Javascript代码如下：

<script>
function Warn()  
    this.render = function(dialog)  
    var winW = window.innerWidth; 
     var winH = window.innerHeight; 
     var dialogoverlay = document.getElementById('dialogoverlay'); 
     var dialogbox = document.getElementById('dialogbox'); 
     dialogoverlay.style.display = "block"; 
     dialogoverlay.style.height = winH+"px"; 
     dialogbox.style.left = (winW/2) - (550 * .5)+"px"; 
     dialogbox.style.top = "300px"; 
     dialogbox.style.display = "block"; 
     document.getElementById('dialogboxhead').style.background = "url('../images/warningHead.gif') no-repeat";
    document.getElementById('dialogboxhead').style.height = "30px";
            document.getElementById('dialogboxbody').style.background = "#fbfab9";
     document.getElementById('dialogboxbody').innerHTML = dialog; 
            document.getElementById('dialogboxfoot').style.background = "#fbfab9";
     document.getElementById('dialogboxfoot').innerHTML = '<button onclick="return      Warn.ok(); return false">Go Ahead and Delete</button>&nbsp;<button onclick="return Warn.cancel(); return true">Get Me Out Of Here!</button>'; 
            return false;

this.ok = function()  
    document.getElementById('dialogbox').style.display = "none"; 
    document.getElementById('dialogoverlay').style.display = "none"; 
            return true;
 
this.cancel = function()  
    document.getElementById('dialogbox').style.display = "none"; 
    document.getElementById('dialogoverlay').style.display = "none"; 
            return false;
   

我在 Firefox 中尝试此操作，显示的行为是任一按钮都会弹出警告对话框，但单击时这两个按钮似乎都返回“false”。

【问题讨论】：

首先，<a> 的 HTML 存在一些问题。 onclick 中似乎存在未知的return 属性、不必要的标签和引用错误。在 Warn() 中的 JS 部分 this 不是您认为的那样。看起来你在这里混合了objects 和functions。

好的...这就是我需要的反馈...应该让它做我正在寻找的东西？

【参考方案1】：

首先需要修复 HTML：

<a href="sumcodehere" onclick="return warn.render('This operation cannot be reversed.')">
    <img src="..."  />
</a>

（删除了未知的return 属性并修复了onclick 属性的引用。）

那么在 JS 中，Warn() 看起来像一个构造函数，就这样使用它，create a global object：

var warn = new Warn();

注意变量名开头的小写字母。在内联处理程序中使用相同的变量。

不过，将事件侦听器附加到元素的更好方法是使用 addEventListener 方法。

【讨论】：

引用的原因是因为这是由 Perl 代码内部的“打印”语句生成的代码......因为它包含在引号内，所以必须对引号进行转义。

@D.LawrenceBarksdale 好吧，帖子中没有提到 Perl。无论如何，我已经发布了最终解析的 HTML。你让事件监听器工作了吗？