Javascript 单击div上的事件（文本框除外）

我使用Jquery Flip创建了一个闪卡游戏。我有以下资料：

<div id="card" style="width: 300px;">
    <div class="front" style=" height:200px; width:200px; background-color:#d9edf7;">
    </div>

    <div class="back" style=" height:200px; width:200px; background-color: #eee;">
    </div>
</div>

我希望它只在单击div上除

\u SafmedQuestion

    @Html.EditorFor(x => x.Answer, new { id = "answer" })
    @Html.HiddenFor(x => x.SafmedId, new { id = "safmedId" })


<script type="text/javascript">

    $(document).ready(function () {
        $('#Answer').focus();
    })

</script>

---

卡仍然翻转并执行

CheckAnswer

方法，我做错了什么？

我对MVC一点也不熟悉，但不会

@Html.EditorFor(x => x.Answer, new { id = "answer" })

---

生成一个带有小写字母“answer”的id，所有javascript都在寻找大写字母“answer”。它们不是==。

在单击事件中，请确保获取事件参数并调用事件

更新： 要防止单击事件冒泡到其父级，请执行以下操作：

$('div.front').click(function (e) {
  if (e.target.id === "Answer") {
    e.stopPropagation();
    return false;
  }
  CheckAnswer($('#safmedId').val(), $('#Answer').val());
});

---

我认为这是失败的，因为单击功能将始终位于

.front

分区上。您可能希望在他们单击答案分区后打开单击处理程序，如下所示：

$( "#answer" ).click(function() {
  $('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
  });
});

只有在他们在

#答案

内单击后，才能检查答案

编辑 抱歉，我查看了您的上一个代码块，并与您想要的内容混淆了。您希望代码仅在他们单击答案后运行，因此请将这两个函数都放在答案单击中：

$( "#answer" ).click(function() {
  $('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
    $("#card").flip();
  });
  $('div.back').click(function () {
    GetQuestion();
  }); 
});

---

这将使得在他们点击答案之前不会发生任何事情。然后，如果他们单击

.front

div，它将检查答案并翻转卡片（假设卡片翻转，根据您的喜好移动）。然后，如果他们单击

.back

div，则只有在他们选择了答案后，才会转到下一个问题。

这是因为

e.target.id

是大写的“a”，但id是小写的吗？刚刚尝试过这个，仍然翻转卡片并尝试在没有输入的情况下检查答案。当您单击“答案”按钮时，是否可以调试它并查看e.target.id是什么？如果我这样做，无论我在哪里单击，卡片都不会翻转这是由于javascript调用所有父代码的“事件冒泡”。停止传播（）；将停止气泡效应我从臀部拍摄一点。。。多点js和html会很有帮助。。。但请尝试：$（'div.front'）。单击（函数（e）{if（e.target.id==“Answer”）{e.stopPropagation（）；返回false；}检查答案（$（'safmedId'）.val（），$（'seanswer'）.val（））}很好，您的评论有效，更新了您的答案，我将标记为正确答案。@selectDistinct您是否将此标记为答案？谢谢：）#答案是文本框，我已经在开发工具中检查了这个框，尽管我将id设置为答案，但它必须与MVC相关。如果他们点击文本框，我不想检查答案，只有当他们点击文本框周围的区域，所以在div.front中的任何位置，除非他们点击内部#Answer@selectDistinct编辑了我的答案。意识到我和你想要的东西混在一起了，哈哈。文本框#答案是他们键入答案的地方，一旦他们键入了答案，我希望他们点击文本框，然后卡片才会翻转并检查，如果他们点击文本框，我希望它什么也不做。将点击处理程序放入#应答点击处理程序不会自动运行其他点击处理程序。我将“启用”它们。因此，他们必须单击#应答文本框以“启用”其他两个单击处理程序。一旦它们被启用，用户必须实际单击这些div来“运行”函数。这就是你想要的吗？

$( "#answer" ).click(function() {
  $('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
  });
});

$( "#answer" ).click(function() {
  $('div.front').click(function () {        
    CheckAnswer($('#safmedId').val(), $('#Answer').val());
    $("#card").flip();
  });
  $('div.back').click(function () {
    GetQuestion();
  }); 
});