react中 點(diǎn)擊當(dāng)前組件以外的地方,當(dāng)前組件隱藏的實(shí)現(xiàn)方案:
方案一:
componentDidMount(){
? ? ? ? let self = this;
? ? ? ? //方法調(diào)用
? ? ? ? this._onBlurHandler(self)
? }
_onBlurHandler(self){
? ? ? ? document.body.addEventListener('click', function(e){
? ? ? ? ? ? //針對不同瀏覽器的解決方案
? ? ? ? ? ? function matchesSelector(element, selector){
? ? ? ? ? ? ? ? if(element.matches){
? ? ? ? ? ? ? ? ? ? return element.matches(selector);
? ? ? ? ? ? ? ? } else if(element.matchesSelector){
? ? ? ? ? ? ? ? ? ? return element.matchesSelector(selector);
? ? ? ? ? ? ? ? } else if(element.webkitMatchesSelector){
? ? ? ? ? ? ? ? ? ? return element.webkitMatchesSelector(selector);
? ? ? ? ? ? ? ? } else if(element.msMatchesSelector){
? ? ? ? ? ? ? ? ? ? return element.msMatchesSelector(selector);
? ? ? ? ? ? ? ? } else if(element.mozMatchesSelector){
? ? ? ? ? ? ? ? ? ? return element.mozMatchesSelector(selector);
? ? ? ? ? ? ? ? } else if(element.oMatchesSelector){
? ? ? ? ? ? ? ? ? ? return element.oMatchesSelector(selector);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //匹配當(dāng)前組件內(nèi)的所有元素
? ? ? ? ? ? if(matchesSelector(e.target,'.citySelectWrap *')){? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? self.setState({
? ? ? ? ? ? ? ? isShowPop:'hide'
? ? ? ? ? ? })
? ? ? ? }, false);
? ? }
方案二:
_onBlurHandler(self) {
????????????document.body.addEventListener( 'click', function(e) {
????????????????????var cDom = document.querySelector(".repeatSelect");
????????????????????var tDom = e.target;
????????????????????if (cDom == tDom || cDom.contains(tDom)) {
????????????????????} else {
????????????????????????????self.setState({ isShow: 'hide' });
????????????????????}
????????????}, false );
? ?}