Форум

Bizon4ik · #1 (**permalink**) 04.04.2014, 20:28

Доброе время суток.

Объясните, пожалуйста, почему в этом примере http://jsfiddle.net/Bizon4ik/nZ3q8/ функция hide() вызывается при нажатии на кнопку, и тем самым не дает запустить функцию show()?

И как нужно правильно сделать что бы при нажатии на кнопку блок появлялся, а когда наживает на любое место кроме открытого блока, то этот блок исчезал.

Заранее спасибо за ответ.

рони · #2 (**permalink**) 04.04.2014, 21:24

Bizon4ik,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by Bizon4ik</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
    body, html {
    background:#ddd;
}

#marginfirstscreen {
	width:100%;
	height:100%;
	position:relative;
	z-index:1;
}

#marginfirstscreen .mainbutton {
	margin:50px 0 50px 150px;
	display:inline-block;
	width: 200px;
	height: 70px;
	position: relative;
	z-index:5;
}
#marginfirstscreen .mainbutton h4 {
	display:inline-block;
	position:relative;
	z-index:10;
	color:#000;
	text-align:center;
	width:100%;
	height:100%;
	margin:0;
    padding:0;
    line-height:70px;
	font-size:2em;
	font-family:sans-serif;

}
#marginfirstscreen .mainbutton svg {
    position: absolute;
    top: 0;
    left: 0;
	z-index:0;

}
#marginfirstscreen .mainbutton svg line {
    stroke-width: 2;
    stroke: #fff;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
}


#marginfirstscreen .mainbutton:hover svg line.top-line {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}
#marginfirstscreen .mainbutton:hover svg line.bottom-line {
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
#marginfirstscreen .mainbutton:hover svg line.left-line {
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
}
#marginfirstscreen .mainbutton:hover svg line.right-line {
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
}

#buttom-purchase-info {
	position:absolute;
	margin-top:-70px;
	width:400px;
	height:400px;
	border:1px solid red;
	z-index:9;
	display:none;
	background:#fff;
}
  </style>



<script>
$(window).load(function () {
    $("#buttom-purchase").click(function (event) {
        $("#buttom-purchase-info").show();
        event.stopPropagation()
    });
    $(document).on("click", function (event) {
        if ($("#marginfirstscreen").has(event.target).length === 0) $("#buttom-purchase-info").hide();
    });
});
</script>
</head>
<body>
  			<div id="marginfirstscreen">
				<div class="mainbutton" >
					<h4 id="buttom-purchase">КУПИТЬ</h4>
					<svg width="200" height="70">
						<line class="top-line"    x1="0" y1="0" x2="600" y2="0" />
						<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
						<line class="left-line"   x1="0" y1="70" x2="0" y2="-400" />
						<line class="right-line"  x1="200" y1="0" x2="200" y2="470" />
					</svg>
				<div id="buttom-purchase-info" >
				</div>
				</div>
			</div>

</body>
</html>

Vlasenko Fedor · #3 (**permalink**) 04.04.2014, 23:24

Без Jquery

<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo by Bizon4ik</title>
    <style>
      body, html {
        background:#ddd;
      }
      #marginfirstscreen {
        width:100%;
        height:100%;
        position:relative;
        z-index:1;
      }
      #marginfirstscreen .mainbutton {
        margin:50px 0 50px 150px;
        display:inline-block;
        width: 200px;
        height: 70px;
        position: relative;
        z-index:5;
      }
      #marginfirstscreen .mainbutton h4 {
        display:inline-block;
        position:relative;
        z-index:10;
        color:#000;
        text-align:center;
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        line-height:70px;
        font-size:2em;
        font-family:sans-serif;
      }
      #marginfirstscreen .mainbutton svg {
        position: absolute;
        top: 0;
        left: 0;
        z-index:0;
      }
      #marginfirstscreen .mainbutton svg line {
        stroke-width: 2;
        stroke: #fff;
        fill: none;
        stroke-dasharray: 200;
        -webkit-transition: -webkit-transform .6s ease-out;
        transition: transform .6s ease-out;
      }
      #marginfirstscreen .mainbutton:hover svg line.top-line {
        -webkit-transform: translateX(-400px);
        transform: translateX(-400px);
      }
      #marginfirstscreen .mainbutton:hover svg line.bottom-line {
        -webkit-transform: translateX(400px);
        transform: translateX(400px);
      }
      #marginfirstscreen .mainbutton:hover svg line.left-line {
        -webkit-transform: translateY(400px);
        transform: translateY(400px);
      }
      #marginfirstscreen .mainbutton:hover svg line.right-line {
        -webkit-transform: translateY(-400px);
        transform: translateY(-400px);
      }
      #buttom-purchase-info {
        position:absolute;
        margin-top:-70px;
        width:400px;
        height:400px;
        border:1px solid red;
        z-index:9;
        display:none;
        background:#fff;
      }
      #buttom-purchase-info.active {
        display:block;
      }
    </style>
  </head>
  
  <body>
    <div id="marginfirstscreen">
      <div class="mainbutton">
        <h4 id="buttom-purchase">КУПИТЬ</h4>
        <svg width="200" height="70">
          <line class="top-line" x1="0" y1="0" x2="600" y2="0" />
          <line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
          <line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
          <line class="right-line" x1="200" y1="0" x2="200" y2="470" />
        </svg>
        <div id="buttom-purchase-info"></div>
      </div>
    </div>
    <script>
      document.onclick = function (e) {
        var info = document.getElementById("buttom-purchase-info");
        var el = e ? e.target : window.event.srcElement;
          if (el.id == "buttom-purchase" & !info.className) {
            info.className = "active";
          } else {
            info.className = "";
          }
        };
    </script>
  </body>

</html>

рони · #4 (**permalink**) 04.04.2014, 23:37

Poznakomlus,

Сообщение от Bizon4ik

когда наживает на любое место кроме открытого блока, то этот блок исчезал.

Vlasenko Fedor · #5 (**permalink**) 04.04.2014, 23:46

рони,
так исчезает же и ли я опять не понял
все докурил сейчас

Vlasenko Fedor · #6 (**permalink**) 05.04.2014, 00:24

document.onclick = function (e) {
	var info = document.getElementById("buttom-purchase-info");
	var but = document.getElementById("buttom-purchase");
	var el = e ? e.target : window.event.srcElement;
	switch (el) {
		case but:
			!info.className & (info.className = "active");
			break;
		case info:
			break;
		default:
			info.className = "";
	}
};

http://learn.javascript.ru/play/SPOkgb

Bizon4ik · #7 (**permalink**) 05.04.2014, 22:27

Всем спасибо за правильный вариант. А не могли бы вы немного объяснить.
В чем ошибка моей логики?

рони · #8 (**permalink**) 05.04.2014, 22:32

Bizon4ik,
http://learn.javascript.ru/bubbling-and-capturing

Bizon4ik · #9 (**permalink**) 05.04.2014, 22:55

Сообщение от рони

Bizon4ik,
http://learn.javascript.ru/bubbling-and-capturing

Спасибо, я по вашему коду дошел до этой ссылки.

Но проблема в том что ваш код не работает если на страницы есть еще элементы (если на них наживать, то инфо блок не прячется)

Пример: http://jsfiddle.net/Bizon4ik/nZ3q8/1/

ПС: Не годиться вод этот кусок вашего кода: $("#marginfirstscreen").has(event.target).length === 0

Sweet · #10 (**permalink**) 05.04.2014, 22:55

Посоны, мы же все знаем, что document.onclick - абсолютно не жизнеспособный метод навешивания событий. К чём смысл такого совета?
Но вот такие конструкции просто убивают:

!info.className & (info.className = "active");

Ну давай, рассказывай, зачем это нужно

Форум

Справочник

Discord чат

Курсы javascript