Meituan-Dianping/mpvue · warning

passive and prevent can't be used together. Passive handler

Error message

passive and prevent can't be used together. Passive handler can't prevent default event.

What it means

The compiler rejects combining the .prevent and .passive event modifiers. A passive listener promises the browser it will not call preventDefault(), so .prevent would be a no-op; the compiler warns at compile time in development to catch the contradiction early.

Source

Thrown at packages/weex-template-compiler/build.js:1263

) {
  (el.directives || (el.directives = [])).push({ name: name, rawName: rawName, value: value, arg: arg, modifiers: modifiers });
}

function addHandler (
  el,
  name,
  value,
  modifiers,
  important,
  warn
) {
  // warn prevent and passive modifier
  /* istanbul ignore if */
  if (
    process.env.NODE_ENV !== 'production' && warn &&
    modifiers && modifiers.prevent && modifiers.passive
  ) {
    warn(
      'passive and prevent can\'t be used together. ' +
      'Passive handler can\'t prevent default event.'
    );
  }
  // check capture modifier
  if (modifiers && modifiers.capture) {
    delete modifiers.capture;
    name = '!' + name; // mark the event as captured
  }
  if (modifiers && modifiers.once) {
    delete modifiers.once;
    name = '~' + name; // mark the event as once
  }
  /* istanbul ignore if */
  if (modifiers && modifiers.passive) {
    delete modifiers.passive;
    name = '&' + name; // mark the event as passive
  }

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Remove .passive if you actually need preventDefault()
2. Remove .prevent if the handler should stay passive and not block default behavior
3. Move preventDefault logic to a separate non-passive handler

Example fix

// before
<div @scroll.prevent.passive="onScroll">
// after
<div @scroll.passive="onScroll">

function hasConflictingModifiers(directive) {
  const m = directive.arg || '';
  return /\.prevent[\w.]*\.passive|\.passive[\w.]*\.prevent/.test(directive.expression || m);
}
// scan template source: /@\w+(?:\.\w+)*\.(?:prevent[\w.]*passive|passive[\w.]*prevent)/

When it happens

Trigger: Writing a v-on handler with both modifiers, e.g. v-on:scroll.prevent.passive or @touchmove.passive.prevent, so genEvent Handler modifiers contain both prevent and passive when warn is enabled in dev builds.

Common situations: Optimizing scroll/touch performance with .passive while also trying to block default behavior like pull-to-refresh; developers copy modifiers from different examples and combine them.

Related errors

• tag <${tag}> has no matching end tag.
• [Vue tip]: ${msg}
• Templates should only be responsible for mapping the state t
• <template> cannot be keyed. Place the key on real elements i
• Invalid v-for expression: ${exp}

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/9cb70e0e93704cea. Report an issue: GitHub.