What is the meaning of [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event in Angular 4 project?
up vote
4
down vote
favorite
In my angular 4 web project, we got some violations.
- [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
- [Violation] 'DOMContentLoaded' handler took 183ms
- [Violation] Forced reflow while executing JavaScript took 360ms
Our project details are
"@angular/core": "^4.0.0",
"@angular/cli": "^1.4.0",
What is the problem ?
Thanks
angular passive-event-listeners
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
asked Sep 9 '17 at 21:45
Elif A.
967
add a comment |
up vote
4
down vote
favorite
In my angular 4 web project, we got some violations.
- [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
- [Violation] 'DOMContentLoaded' handler took 183ms
- [Violation] Forced reflow while executing JavaScript took 360ms
Our project details are
"@angular/core": "^4.0.0",
"@angular/cli": "^1.4.0",
What is the problem ?
Thanks
angular passive-event-listeners
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
asked Sep 9 '17 at 21:45
Elif A.
967
add a comment |
up vote
4
down vote
favorite
up vote
4
down vote
favorite
In my angular 4 web project, we got some violations.
- [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
- [Violation] 'DOMContentLoaded' handler took 183ms
- [Violation] Forced reflow while executing JavaScript took 360ms
Our project details are
"@angular/core": "^4.0.0",
"@angular/cli": "^1.4.0",
What is the problem ?
Thanks
angular passive-event-listeners
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
asked Sep 9 '17 at 21:45
Elif A.
967
In my angular 4 web project, we got some violations.
- [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
- [Violation] 'DOMContentLoaded' handler took 183ms
- [Violation] Forced reflow while executing JavaScript took 360ms
Our project details are
"@angular/core": "^4.0.0",
"@angular/cli": "^1.4.0",
What is the problem ?
Thanks
angular passive-event-listeners
angular passive-event-listeners
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
asked Sep 9 '17 at 21:45
Elif A.
967
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
asked Sep 9 '17 at 21:45
Elif A.
967
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
edited Nov 11 at 0:08
Kevin Reid
14.9k45276
14.9k45276
asked Sep 9 '17 at 21:45
Elif A.
967
asked Sep 9 '17 at 21:45
Elif A.
967
asked Sep 9 '17 at 21:45
Elif A.
967
967
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
Remove the unnecessary touchstart listeners on the button toggle.
It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have pointer-events: none on the element. This also fixes a warning that is being logged by Chrome.
If you use datatables plugin, select2 plugin, bootstrapSwitch plugin or some jquery libraries, some unnecessary use of (touchstart) events can be used. IF u check these kind of libraries or touchstart events these number of errors will decrease.
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46135394%2fwhat-is-the-meaning-of-violation-added-non-passive-event-listener-to-a-scroll%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
Remove the unnecessary touchstart listeners on the button toggle.
It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have pointer-events: none on the element. This also fixes a warning that is being logged by Chrome.
If you use datatables plugin, select2 plugin, bootstrapSwitch plugin or some jquery libraries, some unnecessary use of (touchstart) events can be used. IF u check these kind of libraries or touchstart events these number of errors will decrease.
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
add a comment |
up vote
2
down vote
accepted
Remove the unnecessary touchstart listeners on the button toggle.
It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have pointer-events: none on the element. This also fixes a warning that is being logged by Chrome.
If you use datatables plugin, select2 plugin, bootstrapSwitch plugin or some jquery libraries, some unnecessary use of (touchstart) events can be used. IF u check these kind of libraries or touchstart events these number of errors will decrease.
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
Remove the unnecessary touchstart listeners on the button toggle.
It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have pointer-events: none on the element. This also fixes a warning that is being logged by Chrome.
If you use datatables plugin, select2 plugin, bootstrapSwitch plugin or some jquery libraries, some unnecessary use of (touchstart) events can be used. IF u check these kind of libraries or touchstart events these number of errors will decrease.
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
Remove the unnecessary touchstart listeners on the button toggle.
It was initially added to prevent it from capturing user events, however it's no longer necessary, because we have pointer-events: none on the element. This also fixes a warning that is being logged by Chrome.
If you use datatables plugin, select2 plugin, bootstrapSwitch plugin or some jquery libraries, some unnecessary use of (touchstart) events can be used. IF u check these kind of libraries or touchstart events these number of errors will decrease.
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
answered Sep 9 '17 at 21:51
Dr. Geek
1,5871527
1,5871527
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
add a comment |
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
1st violation I understood but the others ?
– Elif A.
Sep 9 '17 at 21:53
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46135394%2fwhat-is-the-meaning-of-violation-added-non-passive-event-listener-to-a-scroll%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
