Question

I'm a little puzzling problem Javascript, I'm listing a series of hyperlinks that contain a select control. If you click on the select control you should not being redirected to Google, if you click directly on the rest of the clickable area you must be redirected to Google and be able to mantain select input behaviour(select index change) This works perfectly with both Internet Explorer and Google Chrome, but not Firefox, what's the problem? how do I fix without change markup?

JSFiddle

HTML

<a href='http://www.google.com/' target='_blank'>
    <div class='pholder'>
        <select class='test'>
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
        </select>
    </div>
</a>

CSS

.pholder{
    border:1px solid #333;
    height:100px;
}

.test{
    margin-top:50px;
    margin-left:50px;
}

Javascript

var $cmbs = $('.test');
    $cmbs.click(function (e) {
      e.preventDefault();
      console.log('click');
    });

    $cmbs.change(function (e) {
      e.preventDefault();
      console.log('change');

    });

Answer 1

As mentioned in the comments, block level content is now allowed in an anchor tag (per HTML5 spec); however, interactive content is not allowed. This includes input and select elements. The specs on a (Note the "Content model" section).

Select input inside hyperlink crossbrowser issue

1 个答案: