javascript - jQuery crashes when clicked in firefox, how to solve it?

Question

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

Generally speaking, it is such a simple structure. By clicking on the warpBox, the warpp.

is displayed.

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

The current problem is: after clicking, the hidden p is also displayed, but it disappears after a flash. Testing in other browsers is normal, and the latest jQuery version is currently used.
How to solve it? What went wrong? Thanks!

Answer 1

Finally found the reason. It turns out that Firefox did not prevent this event after executing the click event, resulting in this dead look:

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

Answer 2

You should write those styles into the class, and just click to control the display. Also, if you use absolute positioning, the parent container must use relative positioning! !