Phantomjs: Clicking on a label does not trigger the change event on its control element.

Created on 5 Mar 2014 · 10Comments · Source: ariya/phantomjs

Clicking on a label does not trigger the change event on its control element. For example clicking on a label connected to an radio button input should check the radio button and trigger the change event but it doesn't.

phantomjs version 1.9.7

I've created a test page that should be able to reproduce the problem. It should print a "Changed" message in the console and create a sceenshot with the radio button checked.

Test page:

<!DOCTYPE html>
<html>
<head>
    <title>Label Bug Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<form>
    <label id="label" for="input">label</label>
    <input type="radio" value="1" name="test" id="input"/>
</form>

<script>
    $(document).ready(function () {
        $('#input').on('change', function () {
            console.log("Changed");
        });
        $('#label').click();
    });
</script>
</body>
</html>

Script to run the test:

var page = require('webpage').create();
page.onConsoleMessage = function (msg) {
    console.log(msg);
};
page.open('bugtest.html', function () {
    page.render('result.png');
    phantom.exit();
});

stale

Source

mattiaskarlsson

👍1

All 10 comments

In fact, the click event will not be fired except the object is a button.

victorygod on 8 Apr 2014

I'm able to reproduce this, too.

blimmer on 30 Oct 2014

It looks like this is fixed in 2.0.0.

ef4 on 19 May 2015

Can confirm. This is fixed for us, too.

blimmer on 19 May 2015

Yes, this seems to work as expected in phantomjs 2.0.0 so we can probably close this bug.

mattiaskarlsson on 20 May 2015

Is there any possibility of a fix in this in the 1.9.x version. It's been over a year since this ticket was opened.

benkiefer on 5 Aug 2015

It's still have the problem in 2.0.0. To fix it, I have to create the click event by myself.

page.evaluate(function () {
  var label = document.getElementById('label');
  var event = document.createEvent('MouseEvents');
  event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  label.dispatchEvent(event);
});

chouchou900822 on 1 Feb 2016

Looks like the focus event of the field, that is related to the label, is not triggerd when the label is clicked. Does also not work on 2.1.1

sascha-egerer on 13 Apr 2016

Hello!

You have a new message, please read http://mega-data.biz/track.php?7nh

[email protected]

khebbie on 23 Apr 2016

😕4 👎3

Due to our very limited maintenance capacity, we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed (see #15395 for more details). In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!