个人中心
gpt4 book ai didi

javascript - Jquery - JavaScript - mouseleave 忽略 "toElement"属性的 child

转载 作者：行者123 更新时间：2023-11-28 09:31:27 25 4
gpt4 key购买 nike

我的是这样的:

<body>
    <div id="containerCentral">
        <div id="headerSkinHitArea"></div>
        <div id="footerSkinHitArea"></div>
        <div id="headerSkin">
            <div id="botaoHomeSkin">
                <img src="images/botaoHome.png">
            </div>
            <div id="botaoFecharSkin">
                <img src="images/botaoFechar.png">
            </div>
        </div>
        <div id="conteudoSkin">
            <img src="images/fundo.png">
        </div>
        <div id="footerSkin">
            <div id="centroFooterSkin">
                <div id="botaoRetrocederSkin">
                    <img src="images/botaoSeta.png">
                </div>

                <div id="paginacaoSkin">

                </div>
                <div id="botaoAvancarSkin">
                    <img src="images/botaoSeta.png">
                </div>
            </div>
        </div>
    </div>
</body>

通过 JS 和 JQuery，我在 div HITAREA 中检测到 mouseenter。但是，当您通过 div headerSkin 时，您只是 mouseleave 命中区域。

在此事件中，您拥有 toElement 属性。但问题是，当您在 headerSkin 的 button (childs) 之上时，toElement 就是那个元素，而不是标题皮肤。所以我不知道如何检查你是否离开了一个或另一个。

我想要的是测试 hitarea 中的 mouseleave 是否用于 headerSkin 而忽略了 child 。

有办法吗？

我用 mouseover、.is(":hover") 和其他 ifs 尝试了一千件事，但没有任何效果:/

在 Internet 上有上千种测试 isHover 的方法，但没有一种能像我想要的那样正常工作。

我也尝试过使用鼠标位置，但我认为一直跟踪鼠标是不是有点太多了？!？!？

编辑:这是我所做的:

$(document).ready( documentReady );

//Função executada quando o documento está pronto para ser usado
function documentReady()
{
	//Seta um listener que roda a função assim que o quando o iFrame for carregado
	$("#mainContentContainerSkin").on( "load" , iFrameReady );

	//Adiciona os listeners de mouseover as duas hit areas no topo e na base da página
	$('.skinHitAreas').on( "mouseenter" , showHideMenusSkinTest );

	//Esconde o menu 1 segundo após iniciar a página
	setTimeout( "showHideMenusSkin( false )" , 1000 );

	$(window).resize( mainWindowResizeEvent );
}

function iFrameReady()
{
	$("#mainContentContainerSkin").off( "load" , iFrameReady );
}

/**
 * [Testa o tipo de evento para saber se deve ou não esconder ou mostrar os menus do header e do footer.]
 * @param  {[Event]} event [Evento contendo as informações do memso.]
 */
function showHideMenusSkinTest( event )
{
	//Testa se o evento foi de mouseenter ou mouseleave
	if ( event.type == "mouseenter" )
	{
		//Remove o listener de mouseenter e adiciona o de mouseleave
		$('.skinHitAreas').off( "mouseenter" , showHideMenusSkinTest );
		$('.skinHitAreas').on( "mouseleave" , showHideMenusSkinTest );
		
		//Mostra os menus
		showHideMenusSkin( true );
	}
	else if( event.type == "mouseleave" )
	{
		//Testa se o mouse está na área de um dos menus quando sai da hit area, caso esteja não executa a função de esconder os menus.
		if ( event.clientY >= $(" #headerSkin").height() && event.clientY <= $(window).height() - $("#footerSkin").height() || event.clientY < 0 || event.clientY >= $(window).height() )
		{
			//Remove o listener de mouseleave e adiciona o de mouseenter
			$('.skinHitAreas').off( "mouseleave" , showHideMenusSkinTest );
			$('.skinHitAreas').on( "mouseenter" , showHideMenusSkinTest );
			
			//Esconde os menus
			showHideMenusSkin( false );
		}
	}
}

/**
 * [Esconde ou mostra os menus do header e do footer]
 * @param  {[Boolean]} p_showHide [Boleano que define se deve mostrar (TRUE) ou esconder (FALSE) o menu.]
 */
function showHideMenusSkin( p_showHide )
{	
	TweenLite.killTweensOf( $("#headerSkin") );
	TweenLite.killTweensOf( $("#footerSkin") );

	if ( p_showHide )
	{
		$("#headerSkin").css( "display" , "block" );
		$("#footerSkin").css( "display" , "block" );
		
		TweenLite.to( $("#headerSkin") , 1 , { top : 0 } );
		TweenLite.to( $("#footerSkin") , 1 , { bottom : 0 } );
		TweenLite.to( $("#mainContentContainerSkin") , 1 , { css : { marginTop : 56 , height : $(window).height() - 112 } } );
	}
	else
	{
		TweenLite.to( $("#headerSkin") , 1 , { top : -56 , display : "none" } );
		TweenLite.to( $("#footerSkin") , 1 , { bottom : -56 , display : "none" } );
		TweenLite.to( $("#mainContentContainerSkin") , 1 , { css : { marginTop : 0 , height : $(window).height() } } );
	}
}

function mainWindowResizeEvent()
{
	
}
body
{
	font-family: "gudearegular";
	margin: 0px;
	overflow: hidden;
}

div.customButton
{
	cursor: pointer;
}

#mainContainerSkin
{
     width: 100%;
     height: 100%;
     margin: 0 auto;
}

#headerSkin
{
	position: fixed;
    width: 100%;
    height: 54px;
    background-color: #FFFFFF;
    border: 1px solid #EDEDED;
}

#footerSkin
{
	position: fixed;
    width: 100%;
    height: 54px;
    bottom: 0px;
    background-color: #FFFFFF;
    border: 1px solid #EDEDED;
}

#closeButtonSkin
{
	width: 54px;
    height: 54px;
    float: right;
    border-left: 1px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-style: solid;
	border-color: #EDEDED;
	background-image: url( "../img/botaoFechar.png" );
}

#centerBoxFooterSkin
{
	width: 166px;
	height: 54px;
	margin: 0 auto;
	border-left: 1px;
	border-right: 1px;
	border-top: 0px;
	border-bottom: 0px;
	border-style: solid;
	border-color: #EDEDED;
}

#pagesBoxFooterSkin
{
	width: 54px;
	height: 54px;
	float: left;
	border-left: 1px;
	border-right: 1px;
	border-top: 0px;
	border-bottom: 0px;
	border-style: solid;
	border-color: #EDEDED;
}

#actualPageBoxFooterSkin
{
	margin-left: 5px;
	color: #666666;
	font-family: "gudeabold";
	font-size: 20px;
	font-weight: 700;
}

#pagesBoxSeparatorFooterSkin
{
	width: 56px;
	margin-top: 2px;
	margin-bottom: 2px;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 1px;
	border-style: solid;
	border-color: #666666;
	-ms-transform: rotate( -45deg ); /* IE 9 */
    -webkit-transform: rotate( -45deg ); /* Chrome, Safari, Opera */
    transform: rotate( -45deg );
}

#totalPagesBoxFooterSkin
{
	margin-right: 5px;
	color: #666666;
	float: right;
	font-family: "gudearegular";
	font-size: 16px;
	font-weight: 700;
}

#nextPageButtonFooterSkin
{
	width: 54px;
    height: 54px;
    float: left;
    -ms-transform: rotate( 180deg ); /* IE 9 */
    -webkit-transform: rotate( 180deg ); /* Chrome, Safari, Opera */
    transform: rotate( 180deg );
    background-image: url( "../img/botaoSeta.png" );
}

#previousPageButtonFooterSkin
{
	width: 54px;
    height: 54px;
    float: left;
    background-image: url( "../img/botaoSeta.png" );
}

#mainContentContainerSkin
{
	width: 100%;
	height: 100%;
	border: 0px;
}

#headerSkinHitArea
{
	position: fixed;
	left: 0px;
	width: 100%;
    height: 100px;
}

#footerSkinHitArea
{
	position: fixed;
	left: 0px;
    width: 100%;
    height: 100px;
    bottom: 0px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/vivaskin.css">
    <script src="js/gsap/TweenMax.min.js" type="application/javascript"></script>
    <script src="js/gsap/TimelineMax.min.js" type="application/javascript"></script>
    <script src="js/gsap/plugins/CSSPlugin.min.js" type="application/javascript"></script>
    <script src="js/gsap/easing/EasePack.min.js" type="application/javascript"></script>
    <script src="js/jquery-1.11.1.min.js" type="application/javascript"></script>
    <script src="js/VivaSkin.js" type="application/javascript"></script>
  </head>
  <body>
    <div id="mainContainerSkin">
      <div id="headerSkinHitArea" class="skinHitAreas"></div>
      <div id="footerSkinHitArea" class="skinHitAreas"></div>
      <div id="headerSkin">
        <div id="closeButtonSkin" class="customButton"></div>
      </div>
      <!-- ESSE CONTEÚDO SRC VIRÁ DO BANCO? DE ONDE VEM ESSA INFO? -->
      <iframe id="mainContentContainerSkin" src="clientes/1/curso_teste5/paginas/pagina01/index.html"></iframe>
      <div id="footerSkin">
        <div id="centerBoxFooterSkin">
          <div id="previousPageButtonFooterSkin" class="customButton"></div>
          <div id="pagesBoxFooterSkin">
            <!-- DE ONDE VEM ESSAS INFORMAÇÕES? -->
            <div id="actualPageBoxFooterSkin">01</div>
            <div id="pagesBoxSeparatorFooterSkin"></div>
            <div id="totalPagesBoxFooterSkin">15</div>
          </div>
          <div id="nextPageButtonFooterSkin" class="customButton"></div>
        </div>
      </div>
    </div>
  </body>
</html>

最佳答案

在 jquery 中使用 mouseenter 和 mouseleave 事件。您将希望将它们用于父 div 和子 div。这是一个简化的示例，您可以希望将其用于您的需要:

$(document).ready(function(){
    $('.dohover')
      .mouseenter(function(){
          //Do stuff when you enter parent
    })
      .mouseleave(function(){
          //undo stuff when you leave
    });
    $('.donthover')
      .mouseenter(function(){
          //Undo stuff in parent when you enter child
      })
      .mouseleave(function(){
          if($('.dohover').is(':hover')){
              //Do stuff in parent if you are hovering over it after leaving child
          }
      });
});

这是一个fiddle ，我只是改变了 parent 的颜色。

关于javascript - Jquery - JavaScript - mouseleave 忽略 "toElement"属性的 child ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25687926/

25 4 0
文章推荐： Javascript 拖放代码适用于 div，但不适用于 img
文章推荐： css - 取消 box-sizing : border-box;
文章推荐： swift Xcode 6 unwind segue Action 不会触发
文章推荐： html - 页面未在 wordpress 上加载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com