对于某些用户，输入按钮类型的 onclick 事件在 chrome 中不起作用

Question

这是我的html代码

<input type="button" name="Button" value="      Next      " runat="server" id="btnNext" class="button" onclick ="if (!EmptyCheck()) return false;"  />

和

function EmptyCheck() {
    debugger;
    var txtRSI = $("input[id$=txtRSI]").val();
    var txtQFix = $("input[id$=txtQFix]").val();
    var txtPassPercent = $("input[id$=txtPassPercent]").val();
    var txtDefRejRate = $("input[id$=txtDefRejRate]").val();
    var txtBuildVar = $("input[id$=txtBuildVar]").val();
    var txtEffortVar = $("input[id$=txtEffortVar]").val();
    var txtScheVar = $("input[id$=txtScheVar]").val();
    var txtDeliMet = $("input[id$=txtDeliMet]").val();
    var txtBudgetVar = $("input[id$=txtBudgetVar]").val();
    var ddlOwner = $('select[id$="ddlOwner"]').val();
    var ddlAccount = $('select[id$="ddlAccount"]').val();
    var ddlProgramme = $('select[id$="ddlProgramme"]').val();
    var ddlMonth = $('select[id$="ddlMonth"]').val();
    var ddlYear = $('select[id$="ddlYear"]').val();
    if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") ||
    (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1")
    || (ddlProgramme == "-1") || (ddlYear == 0)) {
        alert("All fields are Mandatory");
        return false;
    }
    else {
        return true;
    }
}

这是 javascript 方法在我的浏览器中可以正常工作。而对其他人不起作用。

找不到发生这种情况的原因..

chrome 不支持内联代码..我在几篇文章中看到了这一点..但它适用于我..但不适用于其他人..有人可以为此提供替代解决方案吗？？？

我还实现了服务器端...想要同时实现。

我也试过这样

getelementbyid('btnid').addeventlistener('click', function()){}

Answer 1

您是否尝试过仅使用该功能？如果你的函数返回一个布尔值，你为什么要检查它然后返回 another 布尔值？只需返回EmptyCheck()

但是，我会说，根据我的经验，使用内联函数是一个糟糕的决定。可以从外部 jscript 文件更有效地管理/调用这些函数。这是一个例子：

步骤 1

在您的 .js 文件中，为每个页面创建一个通用（但不是匿名）函数。例如，我们将在假设的“主页”页面中工作。

function HomePageEvents() {
}

第二步

现在我们有了一个函数，它将作为您主页的 javascript 的容器。 . .但是当然我们需要在某个时候运行这个函数。好吧，我们当然要确保该函数在文档完成加载后运行，因为我们可能需要引用渲染页面的元素。所以让我们继续创建一个匿名函数来触发这个容器函数（也就是 HomePageEvents() 函数）。在您的主页中，添加以下内容：

<script type="text/javascript">
    $(document).ready({function(){
        HomePageEvents();
    });
</script>

第三步

我们又想做什么？啊对！我们想为您的按钮添加一个点击事件。好吧，我们可以先从为点击事件创建函数开始。现在，我假设您的按钮具有某种固有的功能，而我们在这里所做的只是验证按钮。如果确实如此，我们需要做的就是返回一个 true 或 false 来指示事件是否应该继续。

function HomePageEvents() {
   // Function to perform our validation.
   function validateNext() {
      if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
        alert("All fields are Mandatory");
        return false;
      } else {
        return true;
      }
   };
};

第四步

现在我们已经准备好了验证函数，我们只需要将函数添加为 btnNext 按钮的点击事件。

function HomePageEvents() {
   // Add function to btnNext button . . .
   $('#btnNext').on('click', function(){
      validateNext();
   });

   // Function to perform our validation.
   function validateNext() {
      if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
        alert("All fields are Mandatory");
        return false;
      } else {
        return true;
      }
   };
};

最终结果是您可以 (1) 在单个文件中获得所有 javascript - 这更适合缓存，(2) 文件易于管理，以及 (3) 您可以隔离每个页面的代码。

Answer 2

作为替代方案，您可以使用 jQuery click 事件。阅读来自here 的文档。

$('.button').click(function(){ // button is the class name of your input control
 // Your EmptyCheck Logic goes here.
});

请注意，还有其他解决方案可以使用 jQuery 绑定点击事件，例如 .on()。

$('.button').on('click', function() {
// Your EmptyCheck Logic goes here.
});

希望这会有所帮助！