[英]Binding .click and .blur event handlers
我遇到了將.blur
和.click
事件處理程序綁定到同一個可點擊元素的問題。 我要的用戶體驗如下:
用戶點擊搜索圖標並出現搜索字段; 當用戶再次單擊搜索圖標時,他們可以折疊並隱藏搜索字段。 如果他們點擊離開,搜索字段應該隱藏。
到目前為止,我能夠實現大部分我想要的,除了我無法獲得.click
綁定以在單擊后切換類。 我認為這可能是因為在切換$
選擇器后沒有任何結果可供選擇? 我對 JavaScript 比較陌生,所以我不太清楚 JavaScript 或 jQuery 究竟如何處理這樣的事情。
Jsfiddle在這里:http: //jsfiddle.net/TpXJe/1/
編輯:在此處包含代碼,以便將來的 Stack Overflow 用戶可以看到它:
html:
<form class="hidden-xs search-container navbar-right search-form" method="get">
<div class="input-group">
<input id="search-box" type="search" class="search-box" name="s" class="search-field form-control" />
<label class="hide">Search for something</label>
<label for="search-box"><span id="searchDivider">|</span>
<div class="icon-continer"> <span class="glyphicon glyphicon-search search-icon"></span>
</div>
</label>
</div>
</form>
CSS:
.search-container {
right: 0px;
}
#searchDivider {
position: absolute;
right: 0px;
top:31px;
z-index: 1;
color: @brand-success;
cursor: pointer;
font-weight: 200;
}
// Style the search box
$tl: .3s; // transition length
.search-box {
outline-width: 0;
transition: width $tl, border-radius $tl, background $tl;
position: absolute;
right:-37px;
top: 20px;
z-index: 100;
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
background: transparent;
& + label .search-icon {
color: black }
&:hover {
color: white;
background: transparent;
box-shadow: 0 0 0 1px transparent;
& + label .search-icon {
color: white }
}
&.focused {
transition: width $tl cubic-bezier(.18,.57,.25,.94), border-radius $tl;
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 600px;
border: 1px solid black;
border-radius: auto;
background: white;
color: black;
& + label .search-icon {
color: black; }
}
&:not(:focus) {
text-indent:-5000px; } // for more-graceful falling back (:not browsers likely support indent)
}
#search-submit {
position: relative;
left: -5000px;
}
.search-icon {
position: absolute;
right: -45px;
top: 14px;
z-index: 1000;
color: black;
cursor: pointer;
width: 60px;
height: 60px;
padding: 23px;
}
js:
$('.search-icon').click(
function () {
$('.search-box ').toggleClass(' .search-box focused');
});
$('.search-box').blur(
function () {
$('.search-box').removeClass('focused');
});
正如 Ehsan 在評論中所說,似乎在已單擊圖標時單擊該圖標會觸發 click() 和 blur() 事件。 我剛剛添加了一個變量來表示單擊/未單擊的狀態,它對我有用! 在下面更新的小提琴中,我相信你打算做的就是 Jacob 在評論中提到的 - 類名是“focused”而不是“.search-box focus”。
這是JS代碼:
var clicked = false;
$('.search-icon').click(
function () {
if (clicked) {
$('.search-box ').removeClass('focused');
clicked = false;
} else {
$('.search-box ').addClass('focused');
clicked = true;
}
});
$('.search-box').blur(
function () {
$('.search-box').removeClass('focused');
我最近所說的是將我所有的事件偵聽器設置為變量(對象)。 它使得能夠將多個事件分配給單個對象非常容易。
/**
* Event listeners.
* Params: element, event : method
* NOTE: element is passed in as a string, not jQuery object!
* This so we have the possibility of multiple events for a single element (eg. focus & change for the same element).
*
*/
eventHandlers: {
'a click': 'onAnchorClick',
'a hover': 'onAnchorHover'
},
/**
* Registers all event listeners/handlers.
* @returns {void}
*
*/
registerEventHandlers: function() {
var that = this;
$.each(this.eventHandlers, function(key, val) {
var split = key.split(" ");
var element = split[0];
var event = split[1];
$(document).on(event, element, that[val]);
});
}
...
/**
* Event listener for all anchor click events.
* @param {object} event | The click event.
* @returns {void}
*
*/
onAnchorClick: function(event) {
console.log('click event');
// For example purposes:
var ga_eventData = {
'category': 'Text Link',
'action': 'Click',
'label': event.currentTarget.innerText,
'optionalData': {
'page': window.location.protocol + '//' + window.location.host + window.location.pathname
}
}
GA.registerEvent(ga_eventData); // GA is my google analytics module in this example
},
/**
* Event listener for all anchor hover events.
* @param {object} event | The hover event.
* @returns {void}
*
*/
onAnchorHover: function(event) {
console.log('hover event');
}
...
然后在我的初始化方法中,我簡單地調用:
/**
* Initialization method.
* @returns {void}
*
*/
initialize: function() {
var that = this;
that.registerEventHandlers();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.