禁止局部冒泡stopImmediatePropagation

根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数,就会触发执行这些函数;举例来说,点击了页面(body)上某块区域,就相当于点击了body。

使用stopImmediatePropagation()函数可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

<form action="index.html" method="get" id="form-search" class="">
  <div class="search-top"> <span class="fa fa-search"></span>
  <input placeholder="Search Files" input="text" name="keywords">
  <span class="fa fa-angle-down"></span> </div>
  <div class="fileds-group displaynone">
    <div class="field-group">
      <label for="file-collection">Collections</label>
      <select name="file-collection" id="file-collection">
        <option value="all">All</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div class="field-group">
      <label for="file-model">Category</label>
      <select name="file-model" id="file-model">
        <option value="all">All</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div class="field-group">
      <label>
        <input value="Search" type="submit">
      </label>
      <input value="Reset" type="reset">
    </div>
  </div>
</form>
#form-search {
	font-size: 20px;
	color: #fff;
	position: relative;
	z-index: 200;
}
.displaynone {
	display: none;
}
#form-search .fileds-group {
    background: #6C6C6C;
    position: absolute;
    width: 100%;
    padding-top: 40px;
    border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
	transition:all 0.2s ease-in-out;
}
#form-search .fileds-group .field-group{
	margin-bottom: 35px;
}
#form-search .search-top{
	position: relative;
	padding: 0 50px;
	background-color: #C7C7C7;
	line-height: 35px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	transition:all 0.2s ease-in-out;
}
#form-search .search-top:hover,
#form-search .search-top:focus,
#form-search.active .search-top{
	background-color: #808080;
}
#form-search .search-top .fa{
	position: absolute;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 25px;
	text-transform: none;
	vertical-align: middle;
	color: #fff;
	padding: 5px 20px;
	font-size: 20px;
}
#form-search .search-top .fa-search{
	left: 0;
}
#form-search .search-top .fa-angle-down{
	right: 0;
	font-size: 25px;
	top: 0;
	color: rgba(255,255,255,0.5);
}
#form-search .search-top input{
	width: 100%;
	border: 0;
	background-color:transparent;
	padding: 0 10px;
	color: #fff;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 16px;
}
#form-search .search-top input:active,
#form-search .search-top input:hover,
#form-search .search-top input:focus{
	outline: none;
}
#form-search .search-top input::-webkit-input-placeholder{
	color: #fff;
}
#form-search.active .search-top .fa-angle-down,
#form-search .search-top:hover .fa-angle-down{
	color: #fff;
}
#form-search label{
	min-width: 250px;
	margin-bottom: 0;
	line-height: 35px;
	font-size: 20px;
	margin-left: 60px;
}
#form-search select{
	min-width: 380px;
	text-align: center;
	background-color: #B1B1B1;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    height: 35px;
    border: 0;
    font-size: 18px;
    padding: 0 10px;
}
#form-search select:active,
#form-search select:hover,
#form-search select:focus,
#form-search select:active option,
#form-search select:hover option,
#form-search select:focus option,
#form-search select option:active,
#form-search select option:hover,
#form-search select option:focus{
	outline: none;
}
#form-search input[type="submit"],
#form-search input[type="reset"]{
	min-width: 200px;
	line-height: 35px;
	margin-bottom: 25px;
	border: 0;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 18px;
	background-color: #B1B1B1;
}
#form-search input[type="submit"]{
	background-color: #3a75c4;
}
	jQuery("#form-search .search-top .fa, #form-search input[name='keywords']").click(function(e){
		e.stopImmediatePropagation();
		jQuery("#form-search").addClass("active");
		jQuery("#form-search .fileds-group").removeClass("displaynone");
	});

	jQuery("#form-search .fileds-group").click(function(e){
		e.stopImmediatePropagation();
	});

	jQuery(document).click(function(){
		jQuery("#form-search").removeClass("active");
		jQuery("#form-search .fileds-group").addClass("displaynone");
	});

390 total views, 4 views today

Revisions

There are no revisions for this post.

Comments are closed.