Форум

ruslan_mart · #11 (**permalink**) 02.11.2014, 19:43

var h = document.documentElement,
    matches = h.matches || h.matchesSelector || h.webkitMatchesSelector || h.oMatchesSelector || h.mozMatchesSelector || h.msMatchesSelector || function(selector) {
     		var elems = this.parentNode.querySelectorAll(selector), i;
			for(i=0; i<elems.length; i++) if(elems[i] === this) return true;
		};


document.onclick = function(e) {
    if(!matches.call(e.target, '.list, .list div')) {
         //Скрываем элемент
    }
};

skrudjmakdak · #12 (**permalink**) 02.11.2014, 20:04

Ruslan_xDD,
ваш примет по таймауту показывает результат получше)) плюсую
если есть еще какие предложения, буду раз услывашь

skrudjmakdak · #13 (**permalink**) 02.11.2014, 20:46

вот моя еще одна версия, честно сказать она мне больше понравилась))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Example</title>  
		<style>
.list {
	position: absolute;
	background-color: white;
	margin: 5px 0px 5px 0px;
	border: 1px solid black;
	z-index: 5000;
	width: 200px;
}

.list div:hover {
	background-color: yellow;
	cursor: pointer;
}
		</style>
    </head>
	<body>
		<input type="text" value="234" onfocus="f(this);" onclick="event.stopPropagation();">
		<div class="list" onclick="s(this, event)" style="display: none;">
			<div>111111</div>
			<div>222222</div>
			<div>333333</div>
		</div>
	<script>
	var menu = document.querySelector('.list'),
		input = document.querySelector('input');
	
	function f (ths) {
		menu.style.display = 'block';
		
		window.onclick = function () {
			menu.style.display = 'none';
		}
	}
	
	function s (ths, event) {
		var v = event.target.innerHTML;
		input.value = v;
		if (v == '222222')
			return;
		ths.style.display = 'none';
		
		event.stopPropagation();
	}
	</script>
    </body>
</html>

п.с. конечно урезанал, но думаю кому надо суть поймет

Форум

Справочник

Discord чат

Курсы javascript