Javascript “jQuery Click, Document, stopPropagation”

242

20 декабря 2016, 23:05

Такую задачу я решил вот так. Мне интересно на сколько это правильно? Как можно написать по лучше? Потому что если будет много элементов, мне придется при клике, из-за stopPropagation() везде писать какие элементы прятать.

window.App =
{
    OBJ :
    {
        LeftButtom     : {},
        LeftContainer  : {},
        RightButtom    : {},
        RightContainer : {},
        Document       : {},
    },
    Init : function()
    {
        this.OBJ.LeftButtom     = $('#left-buttom');
        this.OBJ.LeftContainer  = $('#left-container');
        this.OBJ.RightButtom    = $('#right-buttom');
        this.OBJ.RightContainer = $('#right-container');
        this.OBJ.Document       = $(document);
        this.ListenLeftContainer();
        this.ListenRightContainer();
        this.ListenDocument();
    },
    ListenLeftContainer : function()
    {
        var th = this;
        this.OBJ.LeftButtom.click(
            function(event)
            {
                th.OBJ.LeftContainer.fadeIn(200);
                if (th.OBJ.RightContainer.is(':visible')) {
                    th.OBJ.RightContainer.fadeOut(0);
                }
                event.stopPropagation();
            }
        );
    },
    ListenRightContainer : function()
    {
        var th = this;
        this.OBJ.RightButtom.click(
            function(event)
            {
                th.OBJ.RightContainer.fadeIn(200);
                if (th.OBJ.LeftContainer.is(':visible')) {
                    th.OBJ.LeftContainer.fadeOut(0);
                }
                event.stopPropagation();
            }
        );
    },
    ListenDocument : function()
    {
        var th = this;
        this.OBJ.Document.click(
            function(event)
            {
                var currentTarget = $(event.target);
                if (th.OBJ.LeftContainer.is(':visible')) {
                    if (currentTarget.closest(th.OBJ.LeftContainer).length) return;
                    th.OBJ.LeftContainer.fadeOut(0);
                }
                if (th.OBJ.RightContainer.is(':visible')) {
                    if (currentTarget.closest(th.OBJ.RightContainer).length) return;
                    th.OBJ.RightContainer.fadeOut(0);
                }
            }
        );
    }
}

Чтобы было понятно, вот собственно о чем я : https://jsfiddle.net/n7s10nsk/

Answer 1

Для каждой кнопки вы сделали отдельный обработчик события, хотя они по сути выполняют идентичные действия. Лучше не дублировать код, если это возможно. Вот мой вариант этой схемы:

window.App = { 
  OBJ: { 
    Buttons: {}, 
    Containers: {}, 
    Document: {}, 
  }, 
 
  Init: function() { 
    this.OBJ.Buttons = $('.container-button'); 
    this.OBJ.Containers = $('.container'); 
    this.OBJ.Document = $(document); 
 
    this.ListenContainer(); 
    this.ListenDocument(); 
  }, 
 
  ListenContainer: function() { 
    var th = this; 
 
    this.OBJ.Buttons.click( 
      function(event) { 
        var currentbutton = this 
 
        th.OBJ.Containers.removeClass('opened'); 
        $('#' + $(this).attr('id') + '-container').addClass('opened'); 
        event.stopPropagation(); 
      } 
    ); 
  }, 
 
 
 
  ListenDocument: function() { 
    var th = this; 
 
    this.OBJ.Document.click( 
      function(event) { 
        th.OBJ.Containers.removeClass('opened'); 
      } 
    ); 
  } 
} 
App.Init();

* { 
  margin: 0; 
  padding: 0; 
} 
.clear-fix:after, 
.clear-fix:before { 
  display: table; 
  content: " "; 
} 
.clear-fix:after { 
  clear: both; 
} 
main .both { 
  width: 50%; 
  padding: 50px; 
  box-sizing: border-box; 
} 
main .left { 
  float: left; 
} 
main .right { 
  float: right; 
} 
main .both .container-button { 
  background-color: #000; 
} 
main .both .container-button p { 
  color: #fff; 
  text-align: center; 
  padding: 20px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
} 
main .both .container-button p:hover { 
  opacity: 0.8; 
} 
main .both .container { 
  background-color: #8a3737; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.3s; 
} 
main .both .container p { 
  background-color: #8a3737; 
  padding: 100px 50px; 
  color: #FFF; 
  text-align: center; 
} 
main .both .container.opened { 
  display: block; 
  opacity: 1; 
  pointer-events: default; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<main class="clear-fix"> 
  <div class="both left"> 
    <div class="container-button" id="left-button"> 
      <p>Open</p> 
    </div> 
    <div class="container" id="left-button-container"> 
      <p>Container</p> 
    </div> 
  </div> 
  <div class="both right"> 
    <div class="container-button" id="right-buttom"> 
      <p>Open</p> 
    </div> 
    <div class="container" id="right-buttom-container"> 
      <p>Container</p> 
    </div> 
  </div> 
</main>