jquery、firefox：事件 preventDefault 不起作用

Question

我在 MVC 中的视图中有以下代码：

   <script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    @model IEnumerable<GeoGame.Models.ConsiderResponse>
    @{
        ViewBag.Title = "Show Second Day Comments";
    }
    <h2>
        Show Second Day Comments</h2>
    @using (Html.BeginForm("StoreThirdDayComments", "DiscussionForum", FormMethod.Post))
    {
        <p>
            <a href="#" id="instrReminder">Instructions</a>
        </p>
        @Html.ValidationSummary(true)
        <table>
            <tr>
                <th>
                    User
                </th>
                <th width="85%">
                    Comments
                </th>
                <th>
                    My reaction
                </th>
            </tr>
            @foreach (var item in Model)
            {
                <tr class="choice">
                    <td>
                        @Html.DisplayFor(modelItem => item.memberNumber)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.justification)
                    </td>
                    <td>
                        @Html.RadioButton("Opinion_" + item.ID, "Agree")<font style="background-color: green"
                            color="black"> Agree </font>
                        <br />
                        @Html.RadioButton("Opinion_" + item.ID, "Disagree")<font style="background-color: red"
                            color="black"> Disagree </font>
                        <br />
                        @Html.RadioButton("Opinion_" + item.ID, "Neither")<font style="background-color: yellow"
                            color="black"> Neutral </font>
                    </td>
                </tr>
            }
        </table>
        <br />        
            <label>
            Please respond to <b>each</b> of your peers' comments using the following pattern:</label>
        <br />
        <br />
        <text><i>I agree/disagree/am neutral with 1's comments because: (insert comments)</i></text>
        <br />
        <br />
        <div>
            <textarea rows="7" cols="75" id="ThirdDayComments" name="ThirdDayComments"></textarea>
        </div>
        <p>
            <input type="submit" id="btnSubmit" value="Submit and answer question -->" />
        </p>
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function (e) {
                var isValid = true;
                if ($.trim($("#ThirdDayComments").val()) == '') {                
                    isValid = false;
                }
                if ($('tr.choice').not(':has(:radio:checked)').length) {                
                    isValid = false;
                }
                if (isValid == false) {
                    alert('Please choose agree, disagree, neutral for each comment and explain the reasons in the textbox provided');
                }
                if (isValid == false) {
                    e.returnValue = false;
                    e.preventDefault();
                }
            });
            $('#instrReminder').click(function (e) {
                alert("1. Read the comments made by your peers.\n2. Select agree/disagree/neutral for each of them.\n3. Fill out the text box according to the pattern mentioned.\n4. Click submit.\n5. You will be taken to a page with a question with multiple-choice answers.\n");
                e.returnValue = false;
                e.preventDefault();
            });
        });             
    </script>

我想在未选择单选按钮或未填充文本框时阻止页面继续。这适用于 Chrome.
但是，在 Firefox 中，如果用户在没有选择单选按钮或填写文本框的情况下单击提交几次，则会弹出一条带有消息的警告（如代码中所示），但也会 "Prevent additional popups"。选择该选项并再次点击提交时，该页面 not 不再阻止默认设置。它只是通过。我不想要那个。
查了很多其他帖子，好像都没有完全解决这个问题
关于如何在 Firefox 中修复此问题的任何想法？我使用的是版本 36.0.1.

Answer 1

您需要将两个isValid == false条件连接在一起，并将preventDefault放在alert之前。试试这个：

if (isValid == false) {
    e.returnValue = false;
    e.preventDefault();
    alert('Please choose agree, disagree, neutral for each comment and explain the reasons in the textbox provided');
}

同样需要在 #instrReminder 元素的点击处理程序中完成。

Answer 2

在 firefox 阻止了多个警报后返回错误。解决方案是不提醒多次或根本不提醒，事件处理程序的更好选择是表单提交而不是提交按钮单击。

像这样 - 假设表单的 ID 是 DiscussionForum

 $('#DiscussionForum').on("submit",function (e) {
   var isValid = true;
   $("#message").empty();
   if ($.trim($("#ThirdDayComments").val()) == '') {                
     isValid = false;
   }
   if ($('tr.choice').not(':has(:radio:checked)').length) {                
     isValid = false;
   }
   if (!isValid) {
     e.returnValue = false;
     e.preventDefault();
     $("#message").html('Please choose agree, disagree, neutral for each comment and explain the reasons in the textbox provided');
   }
 });

Answer 3

一旦您告诉 Firefox 您不希望该页面产生更多警报，对 alert() 的调用将导致抛出异常。

两种处理方法：

将您对 alert() 的调用包装在 try catch:

中

try {
  alert("whatever");
}
catch (err) {
  console.log("denied");
}

现在将处理异常。

停止使用 alert()，因为它很丑陋并且会导致您现在面临的问题。

jquery、firefox：事件 preventDefault 不起作用

jquery, firefox: event preventDefault does not work

javascript

firefox

jquery