点击事件页面滚动

Question

我正在为产品页面创建一个添加到购物车的粘性表单。

基本上是产品初始输入字段的副本，所以样本和尺寸选择器。

一切正常，但有一个小问题，当我点击粘性元素上的某些内容时，它也会更改第一个元素上的相应元素，但会将用户重定向到页面顶部。

我试过 preventDefault(), stopPropagation(), and return false; 但它取消了粘性按钮的全部功能，此时我有点不知道去哪里寻找错误。

Here is the store传球是：o1xezsotq3

表单的 HTML 代码是：

<div class="form-field-sticky" data-product-attribute="swatch-2">


{{#each this.values}}
    <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_swatch_{{../id}}_{{id}}" {{#if selected}}checked data-default{{/if}} {{#if ../required}}required{{/if}}>
    <label class="form-option form-option-swatch" for="attribute_swatch_{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
        {{#if image}}
            <span class='form-option-variant form-option-variant--pattern' title="{{this.label}}" style="background-image: url('{{getImage image "swatch_option_size"}}');"></span>
        {{/if}}
        {{#if data.[2]}}
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[1]}}"></span>
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[2]}}"></span>
        {{else}}
            {{#if data.[1]}}
                <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
                <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[1]}}"></span>
            {{else}}
                {{#if data.[0]}}
                    <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
                {{/if}}
            {{/if}}
        {{/if}}
        {{#if pattern}}
            <span class="form-option-expanded">
                <span class="form-option-image" style="background-image: url('{{getImage image 'core-swatch'}}');"></span>
            </span>
        {{/if}}
    </label>
{{/each}}

“添加到购物车”按钮适用于此 JS：

$('$stickyBuy').on('click', () => {
$('[name="product_id"]').parents('form').submit();
});

我在上面尝试这种 JS 的样本：

$('.form-field-sticky').on('change', (event) => {
    const $changed = $(event.currentTarget);
    const toChange = $changed.attr('name');
    const changedVal = $changed.val();
    $('[name="product_id"]').parents('form').find(`[name="${toChange}"]`).val(changedVal).change();
});

我注意到的是，当 ID 相同时，表单会在没有 JS 的情况下自动更新，所以这一行：

id="attribute_swatch_{{../id}}_{{id}}"

当我这样调整的时候：

id="attribute_swatch_{{../id}}_{{id}}_sticky"

功能停止工作，但我无法使用我发布的用于同时更新两种形式的 JS 代码使用它 - 所以当一个发生变化时，也更新另一个 - 没有在页面顶部被重新定义到原始样本。

有人可以帮我解决这个问题吗？我将不胜感激。

非常感谢！祝你有个愉快的一天。

Answer 1

通过添加

修复

            event.target.focus({preventScroll: true});

点击事件页面滚动

Page scrolling on click event

javascript

bigcommerce