Home/ Questions/Q 896443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T14:43:56+00:00

I have simplified my page and here what I have: <html> <head> <meta http-equiv=content-type

  • 0

I have simplified my page and here what I have:

<html>
<head>
<meta http-equiv="content-type" content="text/plain; charset=utf-8" />
<title>Title</title>
<style>
    a {
        text-decoration: none;
    }

    div select {
        margin-top: 20px;
        display: block;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
    $('div').click(function(){
                        return false;
                        });
</script>


</head>

<body>
<a href="#############">
<img src="preview_image" />
    <div>
        <input type="text" value="" />
        <select>
            <option value="default" selected>choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</a>
</body>
</html>

The main idea is that I have a “A” hyperlink tag, inside which is included DIV with INPUT and SELECT inside.

What my goal is: when I put text into INPUT and when I select option from SELECT – the parent A hyperlink should not trigger.

I have tried to fix it with “return false”, but looks this is not helping.

Also I have some problem in Mozilla FF: SELECT is not choosing any value whatever you choose there in the list. It is always left as “choose”

UPD

the only problem left is the SELECT behavior inside A-hyperlink in FireFox. I have FF version 3.6.3 And the behavior is when I select option from SELECT it is not set as chosen. In all the rest browsers seem to work correctly.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem with your approach: everything is contained in this link element. So theoretically, a browser is right to assume that anything that gets clicked inside this A-tag is clicking the link. Even thought this may work differently for some browsers, and lead to the behaviour you would like, I would doubt that the behaviour is consistent over all user agents. Hence I don’t see how there is any way to make this work reliably without getting rid of the A-element, respectively moving the A-element so its only around the image (which is the behaviour you desire):

    <a href="#############">
   <img src="preview_image" />
</a>
<div>
   <input type="text" value="" />
   <select>
            <option value="default" selected>choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
   </select>
</div>
    • 0