javascript - JQuery plante lorsqu'on clique dessus dans Firefox, comment le résoudre ?

Question

<p id='warpBox' class='warp'>点我</p>
<p class='warpp' style="display: none;">
    <img src ='' />
    <p class='title'>图片名称</p>
    <p class='dec'>图片描述</p>
</p>

C'est fondamentalement une structure si simple. En cliquant sur la warpBox, la warpp s'affiche.

$('#warpBox').on('click',function(e){
    $('.warpp').css({
        'position': 'absolute',
        'top': '50%',
        'left': '35%'
    })
})

Le problème actuel est le suivant : après avoir cliqué, le p caché s'affiche également, mais il disparaît après un flash. Les tests dans d'autres navigateurs sont normaux et la dernière version de jQuery est actuellement utilisée.
Comment le résoudre ? Qu'est ce qui ne s'est pas bien passé? Merci!

Answer 1

J'ai finalement trouvé la raison. Il s'avère que Firefox n'a pas empêché cet événement après l'exécution de l'événement de clic, ce qui a donné ce look mort :

$('#warpBox').on('click',function(e){
    e.stopPropagation();  //OK
    $('.warpp').css({
        'position': 'absolute',
        'top': '50%',
        'left': '35%'
    })
})

Answer 2

Vous devez écrire ces styles dans la classe et cliquer simplement pour contrôler l'affichage. De plus, si vous utilisez le positionnement absolu, le conteneur parent doit utiliser le positionnement relatif ! !