为什么 return false 不适用于 switch 语句？答案

【问题标题】：Why is the return false not working on a switch statement?为什么 return false 不适用于 switch 语句？
【发布时间】：2018-06-26 22:48:18
【问题描述】：

单击正文中的任何元素时，我正在运行 Javascript Switch 语句。因此，当找到匹配项时（在本例中，我定位一个按钮类并返回 false），break 关键字 应该停止执行并忽略所有其余代码。相反，当我点击按钮时，默认代码块仍然运行。它会触发我在默认代码块中设置的控制台消息，但它不应该。

为什么 return false 或 break 关键字不起作用？

当已有匹配项时，如何阻止默认代码块运行？

（打开控制台查看消息）这是一个例子Jsfiddle

Javascript

 $(document).on('click', function(event) {

  var e = $( this );
  var eClass = e.attr( 'class' );

  switch( eClass ){

      case 'btn-default':

             return false;

             break;

      default:

          var identifier = $( '.identifier' );

          if (!$(event.target).find( $( identifier ) ).length ) {

                console.log( 'Identical' );

          }            
       }


 });

HTML

 <div class="row">
    <div class="col visible" data-id="el_1">
        Visible Content
    </div>
    <div class="col">
        <button type="button" class="btn btn-default">
           Click
        </button>
    </div>
  </div>

  <div class="identifier" id="el_1"></div>

【问题讨论】：

因为 return false 是在没有运行的情况下。对于您为什么要尝试从文档中获取属性值也很困惑。
我完全理解你的意思，但默认代码块应该只在没有找到匹配项的情况下运行。您感到困惑的元素是我实际上将它用作另一个代码的目标。
我认为你错了。添加 console.logs 或调试器语句以确认并包含有问题的控制台输出。您选择的答案似乎证实了我的怀疑。

标签： javascript jquery switch-statement

【解决方案1】：

您的按钮的类是“btn btn-default”，但您的开关盒仅查找“btn-default”，这不匹配。

【讨论】：

你好 Babak，控制台仍然被触发。打开控制台检查一下
好收获。 $(this) 是整个文档，而不是被点击的按钮。

【解决方案2】：

简单地说：“btn btn-default”将不匹配“btn-default”。您要么需要拆分/检查类，要么在元素上使用 jQuery 的 .hasClass() 之类的东西。

您应该使用 if 语句（eClass.split(/ +/).includes('btn-default') 将用空格分割所有类，.includes 将搜索与 btn-default 匹配的任何类）：

$(document).on('click', function(event) {
  var e = $( event.target );
  var eClass = e.attr( 'class' ) || ''; //Default to empty string if the class doesn't have an attribute of class.
  
  if ( eClass.split(/ +/).includes('btn-default') ) {
    return false;
  }

  var identifier = $( '.identifier' );

  if (!$(event.target).find( $( identifier ) ).length ) {
    console.log( 'Identical' );
  }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col visible" data-id="el_1">
        Visible Content
    </div>
    <div class="col">
        <button type="button" class="btn btn-default">
           Click
        </button>
    </div>
  </div>

  <div class="identifier" id="el_1"></div>

另外：jQuery 有一个.hasClass()，你也可以使用它来确定一个类是否存在于一个元素上。

【讨论】：

您好 FrankerZ，我收到此错误消息 - 无法读取未定义的属性“拆分”...
@jQueryster 查看我的更新。您想使用event.target 而不是this。
成功了！你让我更头疼了。感谢您的回答！

【解决方案3】：

您可以使用hasClass 来检查元素是否包含btn-default 类。你也可以去掉你的 switch 语句，使代码更容易阅读。

if($(this).hasClass('btn-default')) {
    return false;
}
else {
    var identifier = $( '.identifier' );
    if (!$(event.target).find( $( identifier ) ).length ) {
        console.log( 'Identical' );

    }   
}

【讨论】：

你好 Ryan，控制台仍然被触发。打开控制台检查一下
this 不是你想的那样。
@Ryan McCullagh 感谢您的帮助，顺便说一句，我没有否决您的回答。
@KevinB 其实是，就是被点击的对象。
@RyanMcCullagh 好吧，不，这是事件绑定到的元素。在这种情况下，document